From 549de4accd2144f1923a6366ad6db96cb82652af Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Wed, 20 Sep 2017 14:16:28 -0700
Subject: [PATCH] Copy <style is="custom-style"> to the main document

Work around deprecation of styles in HTML Imports
https://crbug.com/523952

Backport from 155ab8a20da27d162dd08a561dc8ed9467f041a3 for 2.x

Related to #4679
---
 src/lib/custom-style.html | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/lib/custom-style.html b/src/lib/custom-style.html
index eeb2861be8..031f83b327 100644
--- a/src/lib/custom-style.html
+++ b/src/lib/custom-style.html
@@ -139,6 +139,33 @@
     },
 
     _tryApply: function() {
+      var createdAppliedElement = false;
+      /*
+      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 && this.__appliedElement === this) {
+        // Can't just cloneNode this style because it will infinite loop
+        var appliedElement = document.createElement('style');
+        appliedElement.textContent = this.textContent;
+        // copy css build type
+        appliedElement.__cssBuild = this.__cssBuild;
+        // set a back pointer to this custom style for use inside of styleDefaults
+        appliedElement.__importElement = this;
+        // disable this style
+        this.setAttribute('media', 'none');
+        this.__appliedElement = appliedElement;
+        document.head.appendChild(appliedElement);
+        createdAppliedElement = true;
+      }
       if (!this._appliesToDocument) {
         // only apply variables if and only if this style is not inside
         // a dom-module
@@ -163,9 +190,12 @@
             var self = this;
             var observer = new MutationObserver(function() {
               observer.disconnect();
+              if (createdAppliedElement) {
+                self.__appliedElement.textContent = self.textContent;
+              }
               self._apply(true);
             });
-            observer.observe(e, {childList: true});
+            observer.observe(createdAppliedElement ? this : e, {childList: true});
           }
         }
       }