diff --git a/src/lib/custom-style.html b/src/lib/custom-style.html index 031f83b327..0d750eac18 100644 --- a/src/lib/custom-style.html +++ b/src/lib/custom-style.html @@ -123,6 +123,19 @@ if (this.__appliedElement !== this) { this.__appliedElement.__cssBuild = this.__cssBuild; } + /* + 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 `` 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) { + document.head.appendChild(this); + } // needed becuase elements in imports do not get 'attached' // TODO(sorvell): we could only do this if and only if // this.ownerDocument != document; @@ -139,33 +152,6 @@ }, _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 `` 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 @@ -190,12 +176,9 @@ var self = this; var observer = new MutationObserver(function() { observer.disconnect(); - if (createdAppliedElement) { - self.__appliedElement.textContent = self.textContent; - } self._apply(true); }); - observer.observe(createdAppliedElement ? this : e, {childList: true}); + observer.observe(e, {childList: true}); } } }