Merge pull request #4892 from Polymer/2.x-shady-unscoped-style

Add support for `shady-unscoped` attribute

Author: dfreedm

bower.json

@@ -20,8 +20,8 @@
     "url": "https://github.com/Polymer/polymer.git"
   },
   "dependencies": {
-    "shadycss": "webcomponents/shadycss#^1.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.2"
+    "shadycss": "webcomponents/shadycss#^v1.1.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^v1.0.19"
   },
   "devDependencies": {
     "web-component-tester": "^6.0.0",

externs/closure-types.js

@@ -749,17 +749,15 @@ Polymer_ElementMixin._parseTemplateContent = function(template, templateInfo, no
 */
 Polymer_ElementMixin.finalize = function(){};
 /**
-* @param {string} is Tag name for this element
-* @param {!HTMLTemplateElement} template Template to process
+* @param {string} cssText Text containing styling to process
 * @param {string} baseURI Base URI to rebase CSS paths against
 * @return {string}
 */
-Polymer_ElementMixin._processStyleText = function(is, template, baseURI){};
+Polymer_ElementMixin._processStyleText = function(cssText, baseURI){};
 /**
 * @param {string} is Tag name (or type extension name) for this element
-* @param {string=} ext For type extensions, the tag name that was extended
 */
-Polymer_ElementMixin._finalizeTemplate = function(is, ext){};
+Polymer_ElementMixin._finalizeTemplate = function(is){};
 /**
 * @interface
 */
@@ -799,7 +797,7 @@ Polymer_DirMixin.prototype.disconnectedCallback = function(){};
 /**
 * @override
 */
-Polymer_DirMixin._processStyleText = function(is, template, baseURI){};
+Polymer_DirMixin._processStyleText = function(cssText, baseURI){};
 /**
 * @param {string} text CSS text to replace DIR
 * @return {string}

lib/mixins/dir-mixin.html

@@ -104,8 +104,8 @@
          * @override
          * @suppress {missingProperties} Interfaces in closure do not inherit statics, but classes do
          */
-        static _processStyleText(is, template, baseURI) {
-          let cssText = super._processStyleText(is, template, baseURI);
+        static _processStyleText(cssText, baseURI) {
+          cssText = super._processStyleText(cssText, baseURI);
           cssText = this._replaceDirInCssText(cssText);
           return cssText;
         }

lib/mixins/element-mixin.html

@@ -399,6 +399,37 @@
       }
     }
 
+    /**
+     * Process all style elements in the element template. Styles with the
+     * `include` attribute are processed such that any styles in
+     * the associated "style modules" are included in the element template.
+     * @param {PolymerElementConstructor} klass Element class
+     * @param {!HTMLTemplateElement} template Template to process
+     * @param {string} is Name of element
+     * @param {string} baseURI Base URI for element
+     * @private
+     */
+    function processElementStyles(klass, template, is, baseURI) {
+      const styles = Polymer.StyleGather.stylesFromModuleImports(is).concat(
+        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
+        // we put a clone of it in the template.
+        if (s.getRootNode() != template.content) {
+          s = s.cloneNode(true);
+          template.content.insertBefore(s, lastStyle);
+        }
+        s.textContent = klass._processStyleText(s.textContent, baseURI);
+      }
+      if (window.ShadyCSS) {
+        window.ShadyCSS.prepareTemplate(template, is);
+      }
+    }
+
     /**
      * @polymer
      * @mixinClass
@@ -578,17 +609,15 @@
       }
 
       /**
-       * Gather style text for the template
+       * Gather style text for a style element in the template.
        *
-       * @param {string} is Tag name for this element
-       * @param {!HTMLTemplateElement} template Template to process
+       * @param {string} cssText Text containing styling to process
        * @param {string} baseURI Base URI to rebase CSS paths against
-       * @return {string} The combined CSS text
+       * @return {string} The processed CSS text
        * @protected
        */
-      static _processStyleText(is, template, baseURI) {
-        return Polymer.StyleGather.cssFromModuleImports(is) +
-          Polymer.StyleGather.cssFromTemplate(template, baseURI);
+      static _processStyleText(cssText, baseURI) {
+        return Polymer.ResolveUrl.resolveCss(cssText, baseURI);
       }
 
       /**
@@ -597,26 +626,17 @@
       * style scoping.
       *
       * @param {string} is Tag name (or type extension name) for this element
-      * @param {string=} ext For type extensions, the tag name that was extended
       * @protected
       */
-      static _finalizeTemplate(is, ext) {
+      static _finalizeTemplate(is) {
         /** @const {HTMLTemplateElement} */
         const template = this.prototype._template;
         if (template && !template.__polymerFinalized) {
           template.__polymerFinalized = true;
           const importPath = this.importPath;
           const baseURI = importPath ? Polymer.ResolveUrl.resolveUrl(importPath) : '';
-          // support `include="module-name"`
-          let cssText = this._processStyleText(is, template, baseURI);
-          if (cssText) {
-            let style = document.createElement('style');
-            style.textContent = cssText;
-            template.content.insertBefore(style, template.content.firstChild);
-          }
-          if (window.ShadyCSS) {
-            window.ShadyCSS.prepareTemplate(template, is, ext);
-          }
+          // e.g. support `include="module-name"`, and ShadyCSS
+          processElementStyles(this, template, is, baseURI);
           this.prototype._bindTemplate(template);
         }
       }