Handle styles that are not direct children of templates correctly

Find the correct spot to add "included" styles in the template by keeping track of which "concrete" style in the template we have encountered and inserting the "included" styles before them. Fixes #4975
Polymer · Dec 6, 2017 · 0b1cd70 · 0b1cd70
1 parent 2d739c7
commit 0b1cd70
Show file tree

Hide file tree

Showing 2 changed files with 41 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 = Array.from(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];
         // 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 (templateStyles.indexOf(s) === -1) {
           s = s.cloneNode(true);
-          template.content.insertBefore(s, lastStyle);
+          let importingTemplateStyle = templateStyles[templateStyleIndex];
+          importingTemplateStyle.parentNode.insertBefore(s, importingTemplateStyle);
+        } 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,31 @@
   </x-specificity-parent>
   <x-overriding></x-overriding>
 
+  <dom-module id="x-nested-style">
+    <template>
+      <div id="container">
+        <style include="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';}
+          ready() {
+            super.ready();
+            this.classList.add('x-shared1');
+          }
+        }
+        customElements.define(XNestedStyle.is, XNestedStyle);
+      });
+    </script>
+  </dom-module>
+
 <script>
 (function() {
   function assertComputed(element, value, property, pseudo) {
@@ -917,6 +942,13 @@
       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', 'top');
+    });
+
   });
 
   if (window.ShadyDOM) {