Restore functionality of selectors like :host(.foo)::after.

Fixes #3749.
Polymer · Jun 29, 2016 · ff88e17 · ff88e17
1 parent 453eccc
commit ff88e17
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
@@ -250,7 +250,11 @@
               return SELECTOR_NO_MATCH;
             }
           } else {
-            return hostScope + paren;    
+            // make sure to do a replace here to catch selectors like:
+            // `:host(.foo)::before`
+            return selector.replace(HOST_PAREN, function(m, host, paren) {
+              return hostScope + paren;
+            });
           }
         // if no paren, do a straight :host replacement.
         // TODO(sorvell): this should not strictly be necessary but 

diff --git a/test/unit/styling-scoped-elements.html b/test/unit/styling-scoped-elements.html
@@ -133,6 +133,11 @@
       border-width: 2px;
     }
 
+    :host(.wide)::after {
+      content: 'a';
+      border: 4px solid blue;
+    };
+
     #keyframes2.special {
       --keyframes100: 200px;
     }

diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -58,8 +58,8 @@
 <script>
   suite('scoped-styling', function() {
 
-  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);
   }
@@ -73,6 +73,9 @@
   test(':host, :host(...)', function() {
     assertComputed(styled, '1px');
     assertComputed(styledWide, '2px');
+    assertComputed(styled, '0px', null, '::after');
+    assertComputed(styledWide, '2px');
+    assertComputed(styledWide, '4px', null, '::after');
 
   });