diff --git a/src/lib/style-util.html b/src/lib/style-util.html index cc5c47a99c..ce70c148c3 100644 --- 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 index 5291734876..d3423eb40e 100644 --- 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 index 2bc8713fcf..769f7ade21 100644 --- a/test/unit/styling-scoped-elements.html +++ b/test/unit/styling-scoped-elements.html @@ -284,4 +284,28 @@ } }); })(); + + + + + + \ No newline at end of file diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html index ac7a52387e..e445fa09d6 100644 --- 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