Merge pull request #1439 from Polymer/0.8-scoping-fix

Fixes style scoping when elements are stamped inside repeats.

src/lib/template/templatizer.html

@@ -45,6 +45,7 @@
 
       // boilerplate code
       archetype._notifyPath = this._notifyPathImpl;
+      archetype._scopeElementClass = this._scopeElementClassImpl;
       // boilerplate code
       var _constructor = this._constructorImpl;
       var ctor = function TemplateInstance(model, host) {
@@ -208,6 +209,13 @@
       this._tryReady();
     },
 
+    _scopeElementClassImpl: function(node, value) {
+      var host = this._rootDataHost;
+      if (host) {
+        return host._scopeElementClass(node, value);
+      }
+    },
+
     stamp: function(model) {
       model = model || {};
       if (this._parentProps) {
@@ -236,7 +244,7 @@
     // },
 
     // stamp: function(model) {
-    //   return new this.ctor(model, this.host);
+    //   return new this.ctor(model, this.dataHost);
     // }
 
 

src/mini/ready.html

@@ -32,7 +32,6 @@
 (function() {
 
   var baseAttachedCallback = Polymer.Base.attachedCallback;
-  var baseDetachedCallback = Polymer.Base.detachedCallback;
 
   Polymer.Base._addFeature({
 
@@ -42,23 +41,6 @@
     ready: function() {
     },
 
-    /**
-      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) {
-      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.
@@ -73,16 +55,13 @@
     // 2. establish this element as the current hosting element (allows
     // any elements we stamp to easily set host to us).
     _pushHost: function(host) {
-      // this.host reflects the parent element whose "local DOM"
-      // this element is contained within. This may change if the element
-      // is appended to a different parent.
-      this.host = host = host ||
+      // NOTE: The `dataHost` of an element never changes.
+      this.dataHost = host = host || 
         Polymer.Base.hostStack[Polymer.Base.hostStack.length-1];
       // this.dataHost reflects the parent element who manages
       // any bindings for the element.  Only elements originally
       // stamped from Polymer templates have a dataHost, and this
       // never changes
-      this.dataHost = host;
       if (host && host._clients) {
         host._clients.push(this);
       }
@@ -138,8 +117,8 @@
       // if (!Polymer.Settings.useNativeCustomElements) {
       //   CustomElements.takeRecords();
       // }
-      //
       this._clientsReadied = true;
+      this._clients = null;
     },
 
     // mark readied and call `ready`
@@ -151,10 +130,6 @@
         this._attachedPending = false;
         this.attachedCallback();
       }
-      // reset _host as it needs to be established by local dom after data
-      // configuration
-      this.host = null;
-      this._clients = null;
     },
 
     // for system overriding
@@ -168,12 +143,6 @@
       } else {
         this._attachedPending = true;
       }
-    },
-
-    detachedCallback: function() {
-      // uncache host so it will be calculated again.
-      this.host = null;
-      baseDetachedCallback.call(this);
     }
 
   });

src/mini/shady.html

@@ -58,6 +58,16 @@
         this.shadyRoot.host = this;
       },
 
+      /**
+       * Return the element whose local dom within which this element 
+       * is contained. This is a shorthand for 
+       * `Polymer.dom(this).getOwnerRoot().host`.
+       */
+      get domHost() {
+        var root = Polymer.dom(this).getOwnerRoot();
+        return root && root.host;
+      },
+
       /**
        * Force this element to distribute its children to its local dom.
        * A user should call `distributeContent` if distribution has been

src/standard/x-styling.html

@@ -48,16 +48,17 @@
       _computeStylePropertiesFromHost: function() {
         // TODO(sorvell): experimental feature, global defaults!
         var props = {}, styles = [Polymer.StyleDefaults.defaultSheet];
-        if (this.host) {
+        var host = this.domHost;
+        if (host) {
           // enable finding styles in hosts without `enableStyleCustomProperties`
-          if (!this.host._styleProperties) {
-            this.host._styleProperties = this.host._computeStyleProperties();
+          if (!host._styleProperties) {
+            host._styleProperties = host._computeStyleProperties();
           }
-          props = Object.create(this.host._styleProperties);
-          styles = this.host._styles;
+          props = Object.create(host._styleProperties);
+          styles = host._styles;
         }
         this.simpleMixin(props,
-          this._customPropertiesFromStyles(styles, this.host));
+          this._customPropertiesFromStyles(styles, host));
         return props;
 
       },
@@ -271,11 +272,9 @@
       serializeValueToAttribute: function(value, attribute, node) {
         if (attribute === 'class') {
           // host needed to scope styling.
-          var host = node.host;
-          if (!host) {
-            var root = Polymer.dom(node).getOwnerRoot();
-            host = root && root.host;
-          }
+          var host = node === this ?
+            Polymer.dom(this).getOwnerRoot() || this.dataHost :
+            this;
           if (host) {
             value = host._scopeElementClass(node, value);
           }
@@ -289,8 +288,9 @@
       },
 
       updateHostStyles: function() {
-        if (this.host) {
-          this.host.updateStyles();
+        var host = Polymer.dom(this).getOwnerRoot() || this.dataHost;
+        if (host) {
+          host.updateStyles();
         } else {
           this._updateRootStyles(document);
         }

test/unit/attributes-elements.html

@@ -7,7 +7,8 @@
       'aria-role': 'button',
       title: 'awesome',
       'attr-object': {foo: 'bar', nested: {'meaning': 42}, arr: [0, 'foo', true]},
-      'attr-stupid': false
+      'attr-stupid': false,
+      class: 'foo bar baz'
     },
     properties: {
       object: {
@@ -108,4 +109,15 @@
       }
     }
   });
+</script>
+
+<dom-module id="x-compose">
+  <template>
+    <x-basic id="basic"></x-basic>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'x-compose'
+  });
 </script>

test/unit/attributes.html

@@ -20,6 +20,8 @@
 
 <x-basic id="basicDefault"></x-basic>
 
+<x-compose id="compose"></x-compose>
+
 <x-basic id="basicConfigured"
   object='{"foo": "bar", "nested": {"meaning": 42}, "arr": [0, "foo", true]}'
   array='[0, "foo", true, {"foo": "bar"}]'
@@ -249,6 +251,27 @@
     assert.equal(basicDefault.getAttribute('attr-object'),
       JSON.stringify(configuredObject));
     assert.equal(basicDefault.hasAttribute('attr-stupid'), false);
+    assert(basicDefault.classList.contains('foo'));
+    assert(basicDefault.classList.contains('bar'));
+    assert(basicDefault.classList.contains('baz'));
+  });
+
+  test('hostAttributes set correctly in composed element', function() {
+    assert.strictEqual(compose.$.basic.getAttribute('attr1'), 'this is attr 1');
+    assert.strictEqual(compose.$.basic.getAttribute('attr2'), '42');
+    assert.strictEqual(compose.$.basic.getAttribute('aria-role'), 'button');
+    assert.strictEqual(compose.$.basic.getAttribute('title'), 'awesome');
+    assert.strictEqual(compose.$.basic.title, 'awesome');
+    assert.equal(compose.$.basic.getAttribute('attr-object'),
+      JSON.stringify(configuredObject));
+    assert.equal(compose.$.basic.hasAttribute('attr-stupid'), false);
+    assert(compose.$.basic.classList.contains('foo'));
+    assert(compose.$.basic.classList.contains('bar'));
+    assert(compose.$.basic.classList.contains('baz'));
+    if (!Polymer.Settings.useNativeShadow) {
+      assert(compose.$.basic.classList.contains('style-scope'));
+      assert(compose.$.basic.classList.contains('x-compose'));
+    }
   });
 
 });