Copy <custom-style> styles to main document

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,19 @@
         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, move the custom style to the main document.
+
+      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) {
+        window.document.head.appendChild(this);
+      }
       return this._style;
     }
   }