Fixes #3555. Ensure selectors including ::content without a prefix …

…inside a complex selector are shimmed correctly and do not leak styling to the global scope.
Polymer · Jun 17, 2016 · 133ef18 · 133ef18
1 parent a54c1f2
commit 133ef18
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 3 deletions.
diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
@@ -168,13 +168,17 @@
             p$[i] = transformer.call(this, p, scope, hostScope);
           }
         }
-        return p$.join(COMPLEX_SELECTOR_SEP);
+        // ensure reasonable whitespace between compound selectors
+        var selector = p$.join(COMPLEX_SELECTOR_SEP);
+        selector = selector.replace(/\s+/g, ' ').replace(/,([^\s])/g, ', $1');
+        return selector;
       },
 
       _transformComplexSelector: function(selector, scope, hostScope) {
         var stop = false;
         var hostContext = false;
         var self = this;
+        selector = selector.trim();
         selector = selector.replace(CONTENT_START, HOST + ' $1');
         selector = selector.replace(SIMPLE_SELECTOR_SEP, function(m, c, s) {
           if (!stop) {

diff --git a/test/unit/styling-scoped-elements.html b/test/unit/styling-scoped-elements.html
@@ -440,8 +440,7 @@
 <dom-module id="x-specificity-parent">
   <template>
     <style>
-      /* TODO remove `:host` when https://github.com/Polymer/polymer/pull/2419 merged */
-      :host ::content > :not(template) {
+      ::content > :not(template) {
         @apply(--x-specificity-parent);
       }
     </style>
@@ -577,4 +576,26 @@
   <script>
     Polymer({is: 'x-shared2'});
   </script>
+</dom-module>
+
+<dom-module id="x-content">
+  <template>
+    <style>
+      ::content > .auto-content {
+        border: 2px solid orange;
+      }
+
+      .bar, ::content .complex-descendant {
+        border: 4px solid red;
+      }
+
+      .bar, ::content > .complex-child {
+        border: 6px solid navy;
+      }
+    </style>
+    <content></content>
+  </template>
+  <script>
+    Polymer({is: 'x-content'});
+  </script>
 </dom-module>
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -113,6 +113,49 @@
     assertComputed(content2, '14px');
   });
 
+  test('auto ::content selector', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('auto-content');
+    d1.textContent = 'auto-content';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '2px');
+  });
+
+  test('::content + descendant in complex selector', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-descendant');
+    d1.textContent = 'complex-descendant';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '4px');
+  });
+
+  test('::content + descendant in complex selector does not leak', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-descendant');
+    d1.textContent = 'complex-descendant';
+    document.body.appendChild(x);
+    document.body.appendChild(d1);
+    assertComputed(d1, '0px');
+  });
+
+  test('::content + child in complex selector', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-child');
+    d1.textContent = 'complex-child';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '6px');
+  });
+
   test('::shadow selectors', function() {
     assertComputed(styled.$.child.$.shadow, '7px');
   });