Merge pull request #1372 from Polymer/0.8-host

Clarify concept of host to mean dom host. Related:

src/features/mini/ready.html

@@ -48,58 +48,57 @@
     ready: function() {
     },
 
-    queryHost: function(node) {
-      return this.host || this._queryHost(this);
+    /**
+      Returns the host of the local dom in which this element exists.
+      This is a shorthand for Polymer.dom(this).getOwnerRoot().host
+    */
+    get host() {
+      return this._host || (this._host = this._queryHost());
+    },
+
+    set host(value) {
+      this._host = value;
     },
 
     _queryHost: function(node) {
-      return node && 
-        (node.host || (node.host = this._queryHost(Polymer.dom(node).parentNode)));
+      var ownerRoot = Polymer.dom(this).getOwnerRoot();
+      return ownerRoot && ownerRoot.host;
     },
 
+    // NOTE: The concept of 'host' is overloaded. There are two different
+    // notions:
+    // 1. an element hosts the elements in its local dom root.
+    // 2. an element hosts the elements on which it configures data.
+    // Practially, these notions are almost always coincident.
+    // Some special elements like templates may separate them.
+    // In order not to over-emphaisize this technical difference, we expose 
+    // one concept to the user and it maps to the dom-related meaning of host.
+    //
     // 1. set this element's `host` and push this element onto the `host`'s
     // list of `client` elements
     // 2. establish this element as the current hosting element (allows 
     // any elements we stamp to easily set host to us).
-    _pushHost: function() {
-      this.host = Polymer.Base.hostStack[Polymer.Base.hostStack.length-1];
-      this._addToHost();
-      if (!this._clients) {
-        this._clients = [];
+    _pushHost: function(host) {
+      this.host = host = host || 
+        Polymer.Base.hostStack[Polymer.Base.hostStack.length-1];
+      if (host && host._clients) {
+        host._clients.push(this);
       }
       this._beginHost();
     },
 
     _beginHost: function() {
       Polymer.Base.hostStack.push(this);
+      if (!this._clients) {
+        this._clients = [];
+      }
     },
 
     _popHost: function() {
       // this element is no longer the current hosting element
       Polymer.Base.hostStack.pop();
     },
 
-    _addToHost: function() {
-      if (!this.host) {
-        this.host = this.queryHost();
-      }
-      if (this.host) {
-        this.host._clients.push(this);
-      }
-    },
-
-    _removeFromHost: function() {
-      if (this.host) {
-        // TODO (sorvell): slow lookup, could use linked list instead
-        // since we don't need random access.
-        var i = this.host._clients.indexOf(this);
-        if (i >= 0) {
-          this.host._clients.splice(i, 1);
-        }
-        this.host = null;
-      }
-    },
-
     _readyContent: function() {
       if (this._canReady()) {
         this._initializeContent();
@@ -118,14 +117,24 @@
       // send data configuration signal
       this._configure();
       // now fully prepare localChildren
-      var c$ = this._getDistributionClients();
+      var c$ = this._clients;
       for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
         c._initializeContent();
       }
       // perform actual dom composition
       this._finishDistribute();
+      // ensure elements are attached if they are in the dom at ready time
+      // helps normalize attached ordering between native and polyfill ce.
+      // TODO(sorvell): worth perf cost? ~6%
+      // if (!Polymer.Settings.useNativeCustomElements) {
+      //   CustomElements.takeRecords();
+      // }
       // send ready signal
       this._ready();
+      // reset _host as it needs to be established by local dom after data
+      // configuration
+      this.host = null;
+      this._clients = null;
     },
 
     // calls `configure`
@@ -151,10 +160,6 @@
 
     // normalize lifecycle: ensure attached occurs only after ready.
     attachedCallback: function() {
-      // avoids redoing work done via creation
-      if (!this.host) {
-        this._addToHost();
-      }
       if (this._readied) {
         baseAttachedCallback.call(this);
       } else {
@@ -163,8 +168,9 @@
     },
 
     detachedCallback: function() {
+      // uncache host so it will be calculated again.
+      this.host = null;
       baseDetachedCallback.call(this);
-      this._removeFromHost();
     }
 
   });

src/features/mini/shady.html

@@ -47,6 +47,7 @@
       _createLocalRoot: function() {
         this.shadyRoot = this.root;
         this.shadyRoot._isShadyRoot = true;
+        this.shadyRoot._dirtyRoots = [];
         // capture insertion point list
         // TODO(sorvell): it's faster to do this via native qSA than annotator.
         this.shadyRoot._insertionPoints = this._template._hasInsertionPoint ?
@@ -57,20 +58,10 @@
       },
 
       _distributeContent: function() {
-        // logically distribute self
-        if (!this._distributionClean) {
+        if (this._useContent && !this._distributionClean) {
+          // logically distribute self
           this._beginDistribute();
-        }
-        // TODO(sorvell): consider having a 'dirtyList' of elements to distribute
-        // now fully distribute/compose "clients"
-        var c$ = this._getDistributionClients();
-        for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
-          // only dirtied via reprojection
-          if (!c._distributionClean) {
-            c._distributeContent();
-          }
-        }
-        if (!this._distributionClean) {
+          this._distributeDirtyRoots();
           this._finishDistribute();
         }
       },
@@ -86,6 +77,14 @@
         }
       },
 
+      _distributeDirtyRoots: function() {
+        var c$ = this.shadyRoot._dirtyRoots;
+        for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
+          c._distributeContent();
+        }
+        this.shadyRoot._dirtyRoots = [];
+      },
+
       _finishDistribute: function() {
         // compose self
         if (this._useContent) {
@@ -102,9 +101,6 @@
             }
           }
           this.shadyRoot._hasDistributed = true;
-        } else if (this.root !== this) {
-          this.appendChild(this.root);
-          this.root = this;
         }
         this._distributionClean = true;
       },
@@ -185,6 +181,7 @@
             if (parent && parent.shadyRoot &&
               hasInsertionPoint(parent.shadyRoot)) {
               parent._distributionClean = false;
+              this.shadyRoot._dirtyRoots.push(parent);
             }
           }
         }
@@ -197,12 +194,6 @@
         }
       },
 
-      // returns a list of elements that support content distribution
-      // within this element's local dom.
-      _getDistributionClients: function() {
-        return this._clients;
-      },
-
       // Reify dom such that it is at its correct rendering position
       // based on logical distribution.
       _composeTree: function() {

src/features/standard/annotations.html

@@ -139,17 +139,21 @@
     // marshal all teh things
     _marshalAnnotationReferences: function() {
       if (this._template) {
-        this._marshalTemplateContent();
         this._marshalIdNodes();
         this._marshalAnnotatedNodes();
         this._marshalAnnotatedListeners();
       }
-    }, 
+    },
+
+    // push configuration references at configure time
+    _configureAnnotationReferences: function() {
+      this._configureTemplateContent();
+    },
 
     // nested template contents have been stored prototypically to avoid 
     // unnecessary duplication, here we put references to the 
     // indirected contents onto the nested template instances
-    _marshalTemplateContent: function() {
+    _configureTemplateContent: function() {
       this._annotes.forEach(function(note) {
         if (note.templateContent) {
           var template = this.findAnnotatedNode(this.root, note);

src/features/standard/configure.html

@@ -62,7 +62,7 @@
     // configure: returns user supplied default property values
     // combines with _config to create final property values
     _configure: function() {
-      this._beforeConfigure();
+      this._configureAnnotationReferences();
       var i;
       // get individual default values from property config
       var config = {};
@@ -86,16 +86,12 @@
       this._distributeConfig(this._config);
     },
 
-    // TODO(sorvell): simple version of mixin; should go elsewhere
     simpleMixin: function(a, b) {
       for (var i in b) {
         a[i] = b[i];
       }
     },
 
-    // system override point
-    _beforeConfigure: function() {},
-
     // distribute config values to bound nodes.
     _distributeConfig: function(config) {
       var fx$ = this._propertyEffects;

src/features/standard/x-styling.html

@@ -14,21 +14,24 @@
 <script>
   (function() {
 
+    var baseAttachedCallback = Polymer.Base.attachedCallback;
+
     // TODO(sorvell): consider if calculating properties and applying
     // styles with properties should be separate modules.
     Polymer.Base.addFeature({
 
-      // compute style properties top-down so that values can be inherited
-      // easily from host.
-      _beforeConfigure: function() {
-        if (this.enableCustomStyleProperties) {
+      attachedCallback: function() {
+        baseAttachedCallback.call(this);
+        if (this.enableCustomStyleProperties && !this._scopeSelector) {
           this._updateOwnStyles();
         }
       },
 
       _updateOwnStyles: function() {
-        this._styleProperties = this._computeStyleProperties();
-        this.applyStyleProperties(this._styleProperties);
+        if (this.enableCustomStyleProperties) {
+          this._styleProperties = this._computeStyleProperties();
+          this.applyStyleProperties(this._styleProperties);
+        }
       },
 
       _computeStyleProperties: function() {
@@ -53,6 +56,7 @@
         this.simpleMixin(props,
           this._customPropertiesFromStyles(styles, this.host));
         return props;
+
       },
 
       _computeOwnStyleProperties: function() {
@@ -130,7 +134,7 @@
           } else if (Polymer.Settings.useNativeShadow) {
             this._applyCustomCss(style.textContent);
           }
-          if (style.textContent && !Polymer.Settings.useNativeShadow) {
+          if (style.textContent /*&& !Polymer.Settings.useNativeShadow*/) {
             this.setAttribute(XSCOPE_ATTR, this._scopeSelector);
           }
         }
@@ -201,7 +205,7 @@
           if (v) {
             var parts = v.split(' ');
             for (var i=0, p; i < parts.length; i++) {
-              p = props[parts[i].trim()]
+              p = props[parts[i].trim()];
               if (p) {
                 output += '\t' + this._propertyToCss(p);
               }
@@ -233,7 +237,9 @@
 
       updateStyles: function() {
         this._updateOwnStyles();
-        var c$ = this._getDistributionClients();
+        // TODO(sorvell): temporary way to find local dom that needs 
+        // x-scope styling.
+        var c$ = Polymer.dom(this.root).querySelectorAll('[x-style-scope]');
         for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
           if (c.updateStyles) {
             c.updateStyles();

src/lib/dom-api.html

@@ -171,13 +171,15 @@
         return this._ownerShadyRootForNode(this.node);
       },
 
+      getOwnerRoot: function() {
+        return this._getOwnerShadyRoot();
+      },
+
       _ownerShadyRootForNode: function(node) {
         if (node._ownerShadyRoot === undefined) {
           var root;
           if (node._isShadyRoot) {
             root = node;
-          } else if (node.host) {
-            root = node.host.shadyRoot;
           } else {
             var parent = Polymer.dom(node).parentNode;
             if (parent) {
@@ -383,6 +385,17 @@
       };
 
       DomApi.prototype.patch = function() {};
+
+      DomApi.prototype.getOwnerRoot = function() {
+        var n = this.node;
+        while (n) {
+          if (n.nodeType === Node.DOCUMENT_FRAGMENT_NODE && n.host) {
+            return n;
+          }
+          n = n.parentNode;
+        }
+
+      };
 
     }