Polymer · kevinpschaaf · Jun 12, 2015 · Jun 12, 2015 · Jun 12, 2015
@@ -239,12 +239,17 @@
 
       transformStyles: function(element, properties, scopeSelector) {
         var self = this;
-        var hostRx = new RegExp(this.rx.HOST_PREFIX + element.is + 
+        var hostSelector = styleTransformer
+          ._calcHostScope(element.is, element.extends);
+        var rxHostSelector = element.extends ? 
+          '\\' + hostSelector.slice(0, -1) + '\\]' : 
+          hostSelector;
+        var hostRx = new RegExp(this.rx.HOST_PREFIX + rxHostSelector + 
           this.rx.HOST_SUFFIX);
         return styleTransformer.elementStyles(element, function(rule) {
           self.applyProperties(rule, properties);
           if (rule.cssText && !nativeShadow) {
-            self._scopeSelector(rule, hostRx, element.is, 
+            self._scopeSelector(rule, hostRx, hostSelector, 
               element._scopeCssViaAttr, scopeSelector);
           }
         });
@@ -253,7 +258,7 @@
       // Strategy: x scope shim a selector e.g. to scope `.x-foo-42` (via classes):
       // non-host selector: .a.x-foo -> .x-foo-42 .a.x-foo
       // host selector: x-foo.wide -> x-foo.x-foo-42.wide
-      _scopeSelector: function(rule, hostRx, is, viaAttr, scopeId) {
+      _scopeSelector: function(rule, hostRx, hostSelector, viaAttr, scopeId) {
         rule.transformedSelector = rule.transformedSelector || rule.selector;
         var selector = rule.transformedSelector;
         var scope = viaAttr ? '[' + styleTransformer.SCOPE_NAME + '~=' + 
@@ -262,7 +267,7 @@
         var parts = selector.split(',');
         for (var i=0, l=parts.length, p; (i<l) && (p=parts[i]); i++) {
           parts[i] = p.match(hostRx) ?
-            p.replace(is, is + scope) :
+            p.replace(hostSelector, hostSelector + scope) :
             scope + ' ' + p;
         }
         rule.selector = parts.join(',');

@@ -165,6 +165,8 @@
             }
             c = o.combinator;
             s = o.value;  
+          } else {
+            s = s.replace(SCOPE_JUMP, ' ');
           }
           return c + s;
         });
@@ -211,7 +213,7 @@
         rule.selector = rule.parsedSelector;
         this.normalizeRootSelector(rule);
         if (!nativeShadow) {
-          this._transformRule(rule, this._transformRootSelector);
+          this._transformRule(rule, this._transformDocumentSelector);
         }
       },
 
@@ -221,17 +223,17 @@
         }
       },
 
-      _transformRootSelector: function(selector) {
+      _transformDocumentSelector: function(selector) {
         return selector.match(SCOPE_JUMP) ?
-          this._transformComplexSelector(selector) :
-          selector.trim() + SCOPE_ROOT_SELECTOR;
+          this._transformComplexSelector(selector, SCOPE_DOC_SELECTOR) :
+          this._transformSimpleSelector(selector.trim(), SCOPE_DOC_SELECTOR);
       },
 
       SCOPE_NAME: 'style-scope'
     };
 
     var SCOPE_NAME = api.SCOPE_NAME;
-    var SCOPE_ROOT_SELECTOR = ':not([' + SCOPE_NAME + '])' + 
+    var SCOPE_DOC_SELECTOR = ':not([' + SCOPE_NAME + '])' + 
       ':not(.' + SCOPE_NAME + ')';
     var COMPLEX_SELECTOR_SEP = ',';
     var SIMPLE_SELECTOR_SEP = /(^|[\s>+~]+)([^\s>+~]+)/g;

@@ -26,6 +26,22 @@
       display: block;
     }
 
+    x-foo::shadow #bar2::shadow #baz {
+      border: 3px solid navy;
+      display: block;
+    }
+
+    x-foo /deep/ #bar3 {
+      border: 4px solid orange;
+      display: block;
+    }
+
+    x-foo /deep/ #bar3 /deep/ #baz {
+      border: 5px solid navy;
+      display: block;
+    }
+
+
     :root {
 
       --italic: italic;
@@ -41,6 +57,8 @@
       width: auto;
 
       --special: var(--primary);
+
+      --after: 11px solid orange;
     }
 
     x-foo {
@@ -70,6 +88,11 @@
     .dynamic {
       border: var(--dynamic);
     }
+
+    #after::after {
+      content: 'after';
+      border: var(--after);
+    }
   </style>
 </head>
 <body>
@@ -86,22 +109,18 @@
 
   <x-foo></x-foo>
 
-  <dom-module id="x-foo">
+  <br><br>
+  <div id="after"></div>
+
+
+  <dom-module id="x-baz">
     <style>
       :host {
         display: block;
-        border: solid tomato;
-        border-width: var(--special);
-      }
-
-      div {
-        @apply(--bag);
       }
     </style>
     <template>
-      <div id="me">x-foo</div>
-      <x-bar id="bar1"></x-bar>
-      <x-bar id="bar2"></x-bar>
+      <div id="me">x-baz</div>
     </template>
   </dom-module>
 
@@ -113,6 +132,27 @@
     </style>
     <template>
       <div>x-bar</div>
+      <x-baz id="baz"></x-baz>
+    </template>
+  </dom-module>
+
+  <dom-module id="x-foo">
+    <style>
+      :host {
+        display: block;
+        border: solid tomato;
+        border-width: var(--special);
+      }
+
+      div {
+        @apply(--bag);
+      }
+    </style>
+    <template>
+      <div id="me">x-foo</div>
+      <x-bar id="bar1"></x-bar>
+      <x-bar id="bar2"></x-bar>
+      <x-bar id="bar3"></x-bar>
     </template>
   </dom-module>
 
@@ -122,6 +162,10 @@
 
       suiteSetup(function() {
 
+        Polymer({
+          is: 'x-baz'
+        });
+
         Polymer({
           is: 'x-bar'
         });
@@ -145,6 +189,12 @@
 
       test('::shadow styles applied', function() {
         assertComputed(xFoo.$.bar2, '2px');
+        assertComputed(xFoo.$.bar2.$.baz, '3px');
+      });
+
+      test('/deep/ styles applied', function() {
+        assertComputed(xFoo.$.bar3, '4px');
+        assertComputed(xFoo.$.bar3.$.baz, '5px');
       });
 
       test('custom properties registered as defaults', function() {
@@ -187,11 +237,16 @@
         assertComputed(e, '1px');
       });
 
+      test('custom-styles apply to pseudo elements', function() {
+        var e = document.querySelector('#after');
+        assertComputed(e, '11px', null, '::after');
+      });
+
     });
 
 
-    function assertComputed(element, value, property) {
-      var computed = getComputedStyle(element);
+    function assertComputed(element, value, property, pseudo) {
+      var computed = getComputedStyle(element, pseudo);
       property = property || 'border-top-width';
       assert.equal(computed[property], value, 'computed style incorrect for ' + property);
     }

@@ -222,6 +222,26 @@
     });
     </script>
   </dom-module>
+
+  <dom-module id="x-button">
+    <style>
+      :host {
+        display: block;
+        border: var(--button-border);
+      }
+    </style>
+    <template>
+      Button!
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-button',
+        extends: 'button'
+      });
+    });
+    </script>
+  </dom-module>
 
   <dom-module id="x-scope">
     <style>
@@ -238,6 +258,9 @@
         --b: 5px;
         --primary-color: rgb(128, 128, 128);
         --late: var(--fillin);
+
+        --button-border: 16px solid tomato;
+        --after: 17px solid brown;
       }
 
       #me {
@@ -299,6 +322,11 @@
       #invalid {
         border: var(--invalid);
       }
+
+      #after::after {
+        content: 'after';
+        border: var(--after);
+      }
     </style>
 
     <template>
@@ -309,6 +337,7 @@
       <x-overrides id="overrides1b"></x-overrides>
       <x-overrides2 id="overrides2"></x-overrides2>
       <x-overrides3 id="overrides3"></x-overrides3>
+      <button id="button" is="x-button"></button>
       <div id="default1">default</div>
       <div id="default2">var default</div>
       <div id="default3">tricky property rgb(...) default</div>
@@ -319,6 +348,7 @@
       <div id="invalid">invalid</div>
       <x-host-property id="hostProp"></x-host-property>
       <x-has-if id="iffy"></x-has-if>
+      <div id="after"></div>
     </template>
     <script>
     HTMLImports.whenReady(function() {
@@ -332,8 +362,8 @@
 <script>
   suite('scoped-styling-var', function() {
 
-  function assertComputed(element, value) {
-    var computed = getComputedStyle(element);
+  function assertComputed(element, value, pseudo) {
+    var computed = getComputedStyle(element, pseudo);
     assert.equal(computed['border-top-width'], value, 'computed style incorrect');
   }
 
@@ -465,6 +495,14 @@
     assertComputed(o3.$.late, '0px');
 
   });
+
+  test('type extension elements consume properties in :host rules', function() {
+    assertComputed(styled.$.button, '16px');
+  });
+
+  test('pseudo-elements can consume custom properties', function() {
+    assertComputed(styled.$.after, '17px', '::after');
+  });
 
 });