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 @@
}
});
})();
+
+
+
+
+
+ big border
+
+
+
\ 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