Merge pull request #5645 from Polymer/share-built-css-flag

legacy-undefined-noBatch: Put `adoptedStyleSheets` use behind a global setting
Polymer · Apr 7, 2020 · 742a103 · 742a103
2 parents 20b207e + 33e1498
commit 742a103
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/lib/mixins/element-mixin.js b/lib/mixins/element-mixin.js
@@ -11,7 +11,7 @@
  */
 import '../utils/boot.js';
 
-import { rootPath, strictTemplatePolicy, allowTemplateFromDomModule, legacyOptimizations, legacyWarnings, syncInitialRender, supportsAdoptingStyleSheets} from '../utils/settings.js';
+import { rootPath, strictTemplatePolicy, allowTemplateFromDomModule, legacyOptimizations, legacyWarnings, syncInitialRender, supportsAdoptingStyleSheets, useAdoptedStyleSheetsWithBuiltCSS } 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';
@@ -304,7 +304,8 @@ export const ElementMixin = dedupingMixin(base => {
     // 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) {
+    if (useAdoptedStyleSheetsWithBuiltCSS && builtCSS &&
+        supportsAdoptingStyleSheets) {
       // Remove styles in template and make a shareable stylesheet
       const styles = template.content.querySelectorAll('style');
       if (styles) {

diff --git a/lib/utils/settings.js b/lib/utils/settings.js
@@ -338,4 +338,22 @@ export let legacyNoObservedAttributes =
  */
 export const setLegacyNoObservedAttributes = function(noObservedAttributes) {
   legacyNoObservedAttributes = noObservedAttributes;
-};
+};
+
+/**
+ * Setting to enable use of `adoptedStyleSheets` for sharing style sheets
+ * between component instances' shadow roots, if the app uses built Shady CSS
+ * styles.
+ */
+export let useAdoptedStyleSheetsWithBuiltCSS =
+  window.Polymer && window.Polymer.useAdoptedStyleSheetsWithBuiltCSS || false;
+
+/**
+ * Sets `useAdoptedStyleSheetsWithBuiltCSS` globally.
+ *
+ * @param {boolean} value enable or disable `useAdoptedStyleSheetsWithBuiltCSS`
+ * @return {void}
+ */
+export const setUseAdoptedStyleSheetsWithBuiltCSS = function(value) {
+  useAdoptedStyleSheetsWithBuiltCSS = value;
+};
diff --git a/test/unit/styling-build-adopted-stylesheets.html b/test/unit/styling-build-adopted-stylesheets.html
@@ -18,7 +18,11 @@
   <script src="wct-browser-config.js"></script>
   <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
   <script type="module">
-    import { supportsAdoptingStyleSheets } from '../../lib/utils/settings.js';
+    import {
+      setUseAdoptedStyleSheetsWithBuiltCSS,
+      supportsAdoptingStyleSheets,
+    } from '../../lib/utils/settings.js';
+    setUseAdoptedStyleSheetsWithBuiltCSS(true);
     window.supportsAdoptingStyleSheets = supportsAdoptingStyleSheets;
     let define = window.customElements.define;
     let order = [];