Adds syncInitialRender setting

This separates the behavior from `legacyOptimizations`. Performs synchronous initial rendering under ShadyDOM when this flag is set.
Polymer · Jan 31, 2019 · d4857ec · d4857ec
1 parent fc7858c
commit d4857ec
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/lib/mixins/element-mixin.js b/lib/mixins/element-mixin.js
@@ -9,7 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 */
 import '../utils/boot.js';
 
-import { rootPath, strictTemplatePolicy, allowTemplateFromDomModule, legacyOptimizations } from '../utils/settings.js';
+import { rootPath, strictTemplatePolicy, allowTemplateFromDomModule, legacyOptimizations, syncInitialRender } 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';
@@ -659,7 +659,7 @@ export const ElementMixin = dedupingMixin(base => {
             n.attachShadow({mode: 'open'});
           }
           n.shadowRoot.appendChild(dom);
-          if (legacyOptimizations && window.ShadyDOM) {
+          if (syncInitialRender && window.ShadyDOM) {
             ShadyDOM.flushInitial(n.shadowRoot);
           }
           return n.shadowRoot;

diff --git a/lib/utils/settings.js b/lib/utils/settings.js
@@ -140,4 +140,22 @@ export let legacyOptimizations = false;
  */
 export const setLegacyOptimizations = function(useLegacyOptimizations) {
   legacyOptimizations = useLegacyOptimizations;
+};
+
+/**
+ * Setting to perform initial rendering synchronously when running under ShadyDOM.
+ * This matches the behavior of Polymer 1.
+ */
+export let syncInitialRender = false;
+
+/**
+ * Sets `syncInitialRender` globally for all elements to enable synchronous
+ * initial rendering.
+ *
+ * @param {boolean} useSyncInitialRender enable or disable synchronous initial
+ * rendering globally.
+ * @return {void}
+ */
+export const setSyncInitialRender = function(useSyncInitialRender) {
+  syncInitialRender = useSyncInitialRender;
 };
diff --git a/test/runner.html b/test/runner.html
@@ -37,7 +37,7 @@
       'unit/shady-events.html',
       'unit/shady-content.html',
       'unit/shady-dynamic.html',
-      'unit/shady-dynamic.html?legacyOptimizations',
+      'unit/shady-dynamic.html?syncInitialRender=true',
       'unit/styling-scoped.html',
       'unit/styling-cross-scope-var.html',
       'unit/styling-cross-scope-apply.html',

diff --git a/test/unit/shady-dynamic.html b/test/unit/shady-dynamic.html
@@ -20,9 +20,9 @@
     };
   </script>
   <script type="module">
-    import {setLegacyOptimizations} from '../../lib/utils/settings.js';
-    window.legacyOptimizations = Boolean(window.location.search.match('legacyOptimizations'));
-    setLegacyOptimizations(window.legacyOptimizations);
+    import {setSyncInitialRender} from '../../lib/utils/settings.js';
+    window.syncInitialRender = Boolean(window.location.search.match('syncInitialRender'));
+    setSyncInitialRender(window.syncInitialRender);
   </script>
   <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script src="wct-browser-config.js"></script>
@@ -1331,8 +1331,8 @@
   document.body.removeChild(re);
 });
 
-test('initial distribution is synchronous when `legacyOptimizations` is true', function() {
-  if (!window.legacyOptimizations) {
+test('initial distribution is synchronous when `syncInitialRender` is true', function() {
+  if (!window.syncInitialRender) {
     this.skip();
   }
   const el = document.createElement('x-test');