Fixes #2652

Polymer · Oct 30, 2015 · e35c4e9 · e35c4e9
1 parent d7d0ed6
commit e35c4e9
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 4 deletions.
diff --git a/src/lib/style-util.html b/src/lib/style-util.html
@@ -99,7 +99,7 @@
       cssFromModule: function(moduleId, warnIfNotFound) {
         var m = Polymer.DomModule.import(moduleId);
         if (m && !m._cssText) {
-          m._cssText = this._cssFromElement(m);
+          m._cssText = this.cssFromElement(m);
         }
         if (!m && warnIfNotFound) {
           console.warn('Could not find style data in module named', moduleId);
@@ -108,7 +108,7 @@
       },
 
       // support lots of ways to discover css...
-      _cssFromElement: function(element) {
+      cssFromElement: function(element) {
         var cssText = '';
         // if element is a template, get content from its .content
         var content = element.content || element;
@@ -118,7 +118,7 @@
           e = e$[i];
           // look inside templates for elements
           if (e.localName === 'template') {
-            cssText += this._cssFromElement(e);
+            cssText += this.cssFromElement(e);
           } else {
             // style elements inside dom-modules will apply to the main document
             // we don't want this, so we remove them here.

diff --git a/src/standard/styling.html b/src/standard/styling.html
@@ -64,6 +64,12 @@
           }
         }
         cssText += styleUtil.cssFromModule(this.is);
+        // check if we have a disconnected template and add styles from that 
+        // if so; if our template has no parent or is not in our dom-module...
+        var p = this._template && this._template.parentNode;
+        if (this._template && (!p || p.id.toLowerCase() !== this.is)) {
+          cssText += styleUtil.cssFromElement(this._template);
+        }
         if (cssText) {
           var style = document.createElement('style');
           style.textContent = cssText;

diff --git a/test/unit/styling-scoped-elements.html b/test/unit/styling-scoped-elements.html
@@ -284,4 +284,28 @@
     }
   });
 })();
+</script>
+
+
+<template id="dynamic-style-template">
+  <style>
+    :host {
+      border: 40px solid tomato;
+    }
+  </style>
+  <div>big border</div>
+</template>
+
+<script>
+(function() {
+  var doc = document._currentScript.ownerDocument;
+  var template = doc.querySelector('template#dynamic-style-template');
+
+  Polymer({
+    is: 'x-dynamic-template',
+    beforeRegister: function() {
+      this._template = template;
+    }
+  });
+})();
 </script>
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -185,6 +185,17 @@
     assertComputed(b, '18px');
   });
 
+  test('styles in dynamically selected template', function() {
+    var el = document.createElement('x-dynamic-template');
+    document.body.appendChild(el);
+    if (el.shadyRoot) {
+      // style properly removed
+      assert.notOk(el.querySelector('style'));
+    }
+    assertComputed(el, '40px');
+    document.body.removeChild(el);
+  });
+
     suite('scoped-styling-shady-only', function() {
 
       suiteSetup(function() {
@@ -200,7 +211,7 @@
       test('styles shimmed in registration order', function() {
         var s$ = document.head.querySelectorAll('style[scope]');
         var expected = ['x-gchild', 'x-child2', 'x-styled', 'x-button', 
-        'x-mixed-case', 'x-mixed-case-button', 'x-dynamic-scope'];
+        'x-mixed-case', 'x-mixed-case-button', 'x-dynamic-scope', 'x-dynamic-template'];
         var actual = [];
         for (var i=0; i<s$.length; i++) {
           actual.push(s$[i].getAttribute('scope'));