Make initial distribution synchronous when legacyOptimizations is set

Uses new `ShadyDOM.flushInitial(shadowRoot)` API. This better matches the behavior of Polymer 1.
Polymer · Jan 30, 2019 · fc7858c · fc7858c
1 parent 491c2a7
commit fc7858c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/lib/mixins/element-mixin.js b/lib/mixins/element-mixin.js
@@ -659,6 +659,9 @@ export const ElementMixin = dedupingMixin(base => {
             n.attachShadow({mode: 'open'});
           }
           n.shadowRoot.appendChild(dom);
+          if (legacyOptimizations && window.ShadyDOM) {
+            ShadyDOM.flushInitial(n.shadowRoot);
+          }
           return n.shadowRoot;
         }
         return null;

diff --git a/test/runner.html b/test/runner.html
@@ -37,6 +37,7 @@
       'unit/shady-events.html',
       'unit/shady-content.html',
       'unit/shady-dynamic.html',
+      'unit/shady-dynamic.html?legacyOptimizations',
       '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
@@ -19,6 +19,11 @@
       force: true
     };
   </script>
+  <script type="module">
+    import {setLegacyOptimizations} from '../../lib/utils/settings.js';
+    window.legacyOptimizations = Boolean(window.location.search.match('legacyOptimizations'));
+    setLegacyOptimizations(window.legacyOptimizations);
+  </script>
   <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script src="wct-browser-config.js"></script>
   <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
@@ -27,9 +32,7 @@
 <body>
 
 <dom-module id="x-project">
-  <template>
-    x-project: [<slot></slot>]
-  </template>
+  <template strip-whitespace>x-project: [<slot></slot>]</template>
 </dom-module>
 <script type="module">
 import { Polymer } from '../../polymer-legacy.js';
@@ -39,7 +42,7 @@
 </script>
 
 <dom-module id="x-reproject">
-  <template>
+  <template strip-whitespace>
     <x-project>x-reproject: [<slot></slot>]</x-project>
   </template>
 </dom-module>
@@ -51,7 +54,7 @@
 </script>
 
 <dom-module id='x-rereproject'>
-  <template>
+  <template strip-whitespace>
     <x-reproject>x-rereproject: [<slot></slot>]</x-reproject>
   </template>
 </dom-module>
@@ -67,7 +70,7 @@
 </script>
 
 <dom-module id="x-test">
-  <template>
+  <template strip-whitespace>
     <x-rereproject><span id="projected">projected</span></x-rereproject>
   </template>
 </dom-module>
@@ -1328,6 +1331,16 @@
   document.body.removeChild(re);
 });
 
+test('initial distribution is synchronous when `legacyOptimizations` is true', function() {
+  if (!window.legacyOptimizations) {
+    this.skip();
+  }
+  const el = document.createElement('x-test');
+  document.body.appendChild(el);
+  assert.equal(ShadyDOM.nativeTree.innerHTML(el), '<x-rereproject class="style-scope x-test"><x-reproject class="style-scope x-rereproject"><x-project class="style-scope x-reproject">x-project: [x-reproject: [x-rereproject: [<span id="projected" class="style-scope x-test">projected</span>]]]</x-project></x-reproject></x-rereproject>');
+  document.body.removeChild(el);
+});
+
 });
 
 suite('Accessors', function() {