Copy <custom-style> styles to main document

Work around deprecation of styles in HTML Imports https://crbug.com/523952 Fixes #4679
Polymer · Sep 20, 2017 · 155ab8a · 155ab8a
1 parent b19e180
commit 155ab8a
Showing 1 changed file with 23 additions and 4 deletions.
diff --git a/lib/elements/custom-style.html b/lib/elements/custom-style.html
@@ -25,18 +25,18 @@
    * - Document styles defined in a `<custom-style>` are shimmed to ensure they
    *   do not leak into local DOM when running on browsers without native
    *   Shadow DOM.
-   * - Custom properties can be defined in a `<custom-style>`. Use the `html` selector 
+   * - Custom properties can be defined in a `<custom-style>`. Use the `html` selector
    *   to define custom properties that apply to all custom elements.
-   * - Custom mixins can be defined in a `<custom-style>`, if you import the optional 
+   * - Custom mixins can be defined in a `<custom-style>`, if you import the optional
    *   [apply shim](https://github.com/webcomponents/shadycss#about-applyshim)
    *   (`shadycss/apply-shim.html`).
    *
    * To use:
-   * 
+   *
    * - Import `custom-style.html`.
    * - Place a `<custom-style>` element in the main document, wrapping an inline `<style>` tag that
    *   contains the CSS rules you want to shim.
-   * 
+   *
    * For example:
    *
    * ```
@@ -91,6 +91,25 @@
         style.removeAttribute(attr);
         style.textContent = Polymer.StyleGather.cssFromModules(include) + style.textContent;
       }
+      /*
+      HTML Imports styling the main document are deprecated in Chrome
+      https://crbug.com/523952
+
+      If this element is not in the main document, then it must be in an HTML Import document.
+      In that case, copy the style into the main document and disable the current style.
+      `__appliedElement` is used by the HTML Imports polyfill for this use case, and already understood by
+      ShadyCSS's Custom Style Interface.
+
+      The ordering of `<custom-style>` should stay the same as when loaded by HTML Imports, but there may be odd
+      cases of ordering w.r.t the main document styles.
+      */
+      if (this.ownerDocument !== window.document) {
+        let appliedStyle = style.cloneNode(true);
+        style.__appliedElement = appliedStyle;
+        // disable style in the HTML Import document
+        style.setAttribute('media', 'none');
+        window.document.head.appendChild(appliedStyle);
+      }
       return this._style;
     }
   }