Add basic support for adoptedStyleSheets

Uses `shadowRoot.adoptedStyleSheets` for element styling when supported (currently Chrome) and only if a css build is used. The build restriction is in place in order to support `@apply` via ShadyCSS. Currently ShadyCSS works only with a style element in the element template.

lib/mixins/element-mixin.js

@@ -11,7 +11,7 @@
  */
 import '../utils/boot.js';
 
-import { rootPath, strictTemplatePolicy, allowTemplateFromDomModule, legacyOptimizations, legacyWarnings, syncInitialRender} from '../utils/settings.js';
+import { rootPath, strictTemplatePolicy, allowTemplateFromDomModule, legacyOptimizations, legacyWarnings, syncInitialRender, supportsAdoptingStyleSheets} from '../utils/settings.js';
 import { dedupingMixin } from '../utils/mixin.js';
 import { stylesFromTemplate, stylesFromModuleImports } from '../utils/style-gather.js';
 import { pathFromUrl, resolveCss, resolveUrl } from '../utils/resolve-url.js';
@@ -294,6 +294,29 @@ export const ElementMixin = dedupingMixin(base => {
     if (window.ShadyCSS) {
       window.ShadyCSS.prepareTemplate(template, is);
     }
+    // Support for `adoptedStylesheets` relies on using native Shadow DOM
+    // and built CSS. Built CSS is required because runtime transformation of
+    // `@apply` is not supported. This is because ShadyCSS relies on being able
+    // to update a `style` element in the element template and this is
+    // removed when using `adoptedStyleSheets`.
+    // Note, it would be more efficient to allow style includes to become
+    // separate stylesheets; however, because of `@apply` these are
+    // potentially not shareable and sharing the ones that could be shared
+    // would require some coordination. To keep it simple, all the includes
+    // and styles are collapsed into a single shareable stylesheet.
+    if (builtCSS && supportsAdoptingStyleSheets) {
+      // Remove styles in template and make a shareable stylesheet
+      const styles = template.content.querySelectorAll('style');
+      if (styles) {
+        let css = '';
+        Array.from(styles).forEach(s => {
+          css += s.textContent;
+          s.parentNode.removeChild(s);
+        });
+        klass._styleSheet = new CSSStyleSheet();
+        klass._styleSheet.replaceSync(css);
+      }
+    }
   }
 
   /**
@@ -705,6 +728,11 @@ export const ElementMixin = dedupingMixin(base => {
           if (!n.shadowRoot) {
             n.attachShadow({mode: 'open', shadyUpgradeFragment: dom});
             n.shadowRoot.appendChild(dom);
+            // When `adoptedStyleSheets` is supported a stylesheet is made
+            // available on the element constructor.
+            if (this.constructor._styleSheet) {
+              n.shadowRoot.adoptedStyleSheets = [this.constructor._styleSheet];
+            }
           }
           if (syncInitialRender && window.ShadyDOM) {
             window.ShadyDOM.flushInitial(n.shadowRoot);

lib/utils/settings.js

@@ -10,9 +10,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 import './boot.js';
 
 import { pathFromUrl } from './resolve-url.js';
-export const useShadow = !(window.ShadyDOM);
+export const useShadow = !(window.ShadyDOM) || !(window.ShadyDOM.inUse);
 export const useNativeCSSProperties = Boolean(!window.ShadyCSS || window.ShadyCSS.nativeCss);
 export const useNativeCustomElements = !(window.customElements.polyfillWrapFlushCallback);
+export const supportsAdoptingStyleSheets = useShadow &&
+    ('adoptedStyleSheets' in Document.prototype) &&
+    ('replaceSync' in CSSStyleSheet.prototype);
 
 
 /**

test/runner.html

@@ -46,6 +46,7 @@
       'unit/styling-cross-scope-apply.html',
       'unit/styling-cross-scope-unknown-host.html',
       'unit/styling-only-with-template.html',
+      'unit/styling-build-adopted-stylesheets.html',
       'unit/custom-style.html',
       'unit/custom-style-late.html',
       'unit/custom-style-async.html',