Skip to content

Commit

Permalink
Fixes #2652
Browse files Browse the repository at this point in the history
  • Loading branch information
Steven Orvell committed Oct 30, 2015
1 parent d7d0ed6 commit e35c4e9
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 4 deletions.
6 changes: 3 additions & 3 deletions src/lib/style-util.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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.
Expand Down
6 changes: 6 additions & 0 deletions src/standard/styling.html
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
24 changes: 24 additions & 0 deletions test/unit/styling-scoped-elements.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
13 changes: 12 additions & 1 deletion test/unit/styling-scoped.html
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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'));
Expand Down

0 comments on commit e35c4e9

Please sign in to comment.