diff --git a/lib/mixins/element-mixin.js b/lib/mixins/element-mixin.js
index b31e25f8b4..9dbc0fd965 100644
--- 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
index f67f55fe97..ee70d3c14b 100644
--- a/lib/utils/settings.js
+++ b/lib/utils/settings.js
@@ -338,4 +338,22 @@ export let legacyNoObservedAttributes =
  */
 export const setLegacyNoObservedAttributes = function(noObservedAttributes) {
   legacyNoObservedAttributes = noObservedAttributes;
-};
\ No newline at end of file
+};
+
+/**
+ * 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
index b917cfe505..ae11d5c336 100644
--- 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 = [];