Merge pull request #4979 from Polymer/fix-non-child-styling

Handle styles that are not direct children of templates correctly
Polymer · Dec 7, 2017 · 60e6860 · 60e6860
2 parents 2d739c7 + 913dfce
commit 60e6860
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 5 deletions.
diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
@@ -417,16 +417,20 @@
     function processElementStyles(klass, template, is, baseURI) {
       const styles = Polymer.StyleGather.stylesFromModuleImports(is).concat(
         Polymer.StyleGather.stylesFromTemplate(template));
-      let templateStyles = template.content.querySelectorAll('style');
-      let lastStyle = templateStyles[templateStyles.length-1];
+      const templateStyles = template.content.querySelectorAll('style');
+      // keep track of the last "concrete" style in the template we have encountered
+      let templateStyleIndex = 0;
       // ensure all gathered styles are actually in this template.
       for (let i=0; i < styles.length; i++) {
         let s = styles[i];
+        let templateStyle = templateStyles[templateStyleIndex];
         // if the style is not in this template, it's been "included" and
-        // we put a clone of it in the template.
-        if (s.getRootNode() != template.content) {
+        // we put a clone of it in the template before the style that included it
+        if (templateStyle !== s) {
           s = s.cloneNode(true);
-          template.content.insertBefore(s, lastStyle);
+          templateStyle.parentNode.insertBefore(s, templateStyle);
+        } else {
+          templateStyleIndex++;
         }
         s.textContent = klass._processStyleText(s.textContent, baseURI);
       }

diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -660,6 +660,61 @@
   </x-specificity-parent>
   <x-overriding></x-overriding>
 
+  <dom-module id="nested-shared-style">
+    <template>
+      <style>
+        :host {
+          padding-top: 10px;
+        }
+      </style>
+    </template>
+  </dom-module>
+
+  <dom-module id="x-nested-style">
+    <template>
+      <div id="container">
+        <style include="nested-shared-style">
+          :host {
+            display: block;
+            border: 10px solid black;
+          }
+        </style>
+      </div>
+    </template>
+    <script>
+      addEventListener('WebComponentsReady', () => {
+        class XNestedStyle extends Polymer.Element {
+          static get is() {return 'x-nested-style';}
+        }
+        customElements.define(XNestedStyle.is, XNestedStyle);
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id="x-interleaved-styles">
+    <template>
+      <style include="x-nested-style"></style>
+      <style>
+        :host {
+          padding-top: 5px;
+        }
+      </style>
+      <style>
+        :host {
+          color: blue;
+        }
+      </style>
+    </template>
+    <script>
+      addEventListener('WebComponentsReady', () => {
+        class XInterleaved extends Polymer.Element {
+          static get is() {return 'x-interleaved-styles';}
+        }
+        customElements.define(XInterleaved.is, XInterleaved);
+      });
+    </script>
+  </dom-module>
+
 <script>
 (function() {
   function assertComputed(element, value, property, pseudo) {
@@ -917,6 +972,19 @@
       assertComputed(e, '1px');
     });
 
+    test('styles work correctly when not direct children of the template', function() {
+      var e = document.createElement('x-nested-style');
+      document.body.appendChild(e);
+      assertComputed(e, '10px');
+      assertComputed(e, '10px', 'padding-top');
+    });
+
+    test('interleaved styles and styles with includes work as expected', function() {
+      var e = document.createElement('x-interleaved-styles');
+      document.body.appendChild(e);
+      assertComputed(e, '5px', 'padding-top');
+    });
+
   });
 
   if (window.ShadyDOM) {