diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
index 9aee47d642..d819d60be3 100644
--- a/lib/mixins/element-mixin.html
+++ b/lib/mixins/element-mixin.html
@@ -414,6 +414,7 @@
Polymer.StyleGather.stylesFromTemplate(template));
let templateStyles = template.content.querySelectorAll('style');
let lastStyle = templateStyles[templateStyles.length-1];
+ // 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
diff --git a/lib/utils/style-gather.html b/lib/utils/style-gather.html
index 602d052e9d..c462a004d1 100644
--- a/lib/utils/style-gather.html
+++ b/lib/utils/style-gather.html
@@ -24,6 +24,18 @@
return PolymerDomModule.import(moduleId);
}
+ function styleForImport(importDoc) {
+ // NOTE: polyfill affordance.
+ // under the HTMLImports polyfill, there will be no 'body',
+ // but the import pseudo-doc can be used directly.
+ let container = importDoc.body ? importDoc.body : importDoc;
+ const importCss = Polymer.ResolveUrl.resolveCss(container.textContent,
+ importDoc.baseURI);
+ const style = document.createElement('style');
+ style.textContent = importCss;
+ return style;
+ }
+
/** @typedef {{assetpath: string}} */
let templateWithAssetPath; // eslint-disable-line no-unused-vars
@@ -108,13 +120,10 @@
if (include) {
styles.push(...this.stylesFromModules(include));
}
- if (window.ShadyDOM && e.hasAttribute(SHADY_UNSCOPED_ATTR)) {
- e.textContent = baseURI ?
- Polymer.ResolveUrl.resolveCss(e.textContent, baseURI) : e.textContent;
- document.head.insertBefore(e, document.head.firstChild);
- } else {
- styles.push(e);
+ if (baseURI) {
+ e.textContent = Polymer.ResolveUrl.resolveCss(e.textContent, baseURI);
}
+ styles.push(e);
}
template._styles = styles;
}
@@ -147,28 +156,15 @@
let p = p$[i];
if (p.import) {
const importDoc = p.import;
- if (!importDoc._style) {
- // NOTE: polyfill affordance.
- // under the HTMLImports polyfill, there will be no 'body',
- // but the import pseudo-doc can be used directly.
- let container = importDoc.body ? importDoc.body : importDoc;
- const importCss = Polymer.ResolveUrl.resolveCss(container.textContent,
- importDoc.baseURI);
- const style = document.createElement('style');
- if (p.hasAttribute(SHADY_UNSCOPED_ATTR)) {
- style.setAttribute(SHADY_UNSCOPED_ATTR, '');
- }
- style.textContent = importCss;
- importDoc._style = style;
- }
- // support the shady-unscoped promoting styles to main document
- if (window.ShadyDOM &&
- importDoc._style.hasAttribute(SHADY_UNSCOPED_ATTR) &&
- !importDoc._style.parentNode) {
- document.head.insertBefore(importDoc._style, document.head.firstChild);
- } else {
- styles.push(importDoc._style);
+ const unscoped = p.hasAttribute(SHADY_UNSCOPED_ATTR);
+ if (unscoped && !importDoc._unscopedStyle) {
+ const style = styleForImport(importDoc);
+ style.setAttribute(SHADY_UNSCOPED_ATTR, '');
+ importDoc._unscopedStyle = style;
+ } else if (!importDoc._style) {
+ importDoc._style = styleForImport(importDoc);
}
+ styles.push(unscoped ? importDoc._unscopedStyle : importDoc._style);
}
}
return styles;
@@ -218,7 +214,8 @@
// include css from the first template in the module
let t = m.querySelector('template');
if (t) {
- cssText += this.cssFromTemplate(t, /** @type {templateWithAssetPath} */(m).assetpath);
+ cssText += this.cssFromTemplate(t,
+ /** @type {templateWithAssetPath} */(m).assetpath);
}
m._cssText = cssText || null;
}
@@ -250,14 +247,7 @@
if (e.parentNode) {
e.parentNode.removeChild(e);
}
- const styleCss = baseURI ?
- Polymer.ResolveUrl.resolveCss(e.textContent, baseURI) : e.textContent;
- if (window.ShadyDOM && e.hasAttribute(SHADY_UNSCOPED_ATTR)) {
- e.textContent = styleCss;
- document.head.insertBefore(e, document.head.firstChild);
- } else {
- cssText += styleCss;
- }
+ cssText += e.textContent;
}
return cssText;
},
@@ -294,7 +284,7 @@
cssText += styles[i].textContent;
}
return cssText;
- },
+ }
};
Polymer.StyleGather = StyleGather;