Fixes #72. (wip, needs more testing)

Steven Orvell · Steven Orvell · commit 1f9e2577da1d · 2016-08-18T19:40:21.000-07:00
diff --git a/src/shady/element-mixin.html b/src/shady/element-mixin.html
@@ -165,13 +165,16 @@
         (Tree.Logical.getParentNode(fragContent).nodeType !==
         Node.DOCUMENT_FRAGMENT_NODE);
       var hasContent = fragContent || (node.localName === insertionPointTag);
-      // There are 3 possible cases where a distribution may need to occur:
-      // 1. <content> being inserted (the host of the shady root where
+      // There are 4 possible cases where a distribution may need to occur:
+      // 1. ownerRoot has never distributed
+      // 2. <content> being inserted (the host of the shady root where
       //    content is inserted needs distribution)
-      // 2. children being inserted into parent with a shady root (parent
+      // 3. children being inserted into parent with a shady root (parent
       //    needs distribution)
-      // 3. container is an insertionPoint
-      if (hasContent || (container.localName === insertionPointTag)) {
+      // 4. container is an insertionPoint
+      var needsInitialDistribution = ownerRoot && !ownerRoot._hasDistributed;
+      if (needsInitialDistribution || hasContent ||
+        (container.localName === insertionPointTag)) {
         if (ownerRoot) {
           // note, insertion point list update is handled after node
           // mutations are complete
diff --git a/test/smoke/shady-basic.html b/test/smoke/shady-basic.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <title>Polymer - shady</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer.html">
+</head>
+<body>
+
+  <dom-module id="base-el">
+    <template>
+      <div>in shadow</div>
+    </template>
+
+    <script>
+      class BaseEl extends Polymer.Element {
+        static get is() { return 'base-el' }
+      }
+      customElements.define(BaseEl.is, BaseEl);
+    </script>
+  </dom-module>
+
+  <base-el>
+    <div>hi</div>
+  </base-el>
+
+</body>
+</html>
diff --git a/test/unit/shady-v1.html b/test/unit/shady-v1.html
@@ -11,7 +11,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <script src="../../../webcomponentsjs/webcomponents-lite.js" 
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"
     ce="v1" register="true"></script>
   <script src="../../../web-component-tester/browser.js"></script>
   <script>
@@ -44,12 +44,33 @@
     registerTestElement();
     // Create an instance of the test element.
     var host = document.createElement('x-content-test');
+    // Populate the initial pool of light DOM children.
+    host.innerHTML = hostInnerHtml;
     document.body.appendChild(host);
     CustomElements.takeRecords();
+    // Pretend we're stamping the template contents.
+    host.shadyRoot.innerHTML = shadowRootHtml;
+    // Invoke distribution and verify the resulting tree.
+    ShadyDom.flush();
+    assert.strictEqual(getComposedHTML(host), expectedHtml);
+    document.body.removeChild(host);
+  });
+  test(descr + ' fragment', function() {
+    registerTestElement();
+    // Create an instance of the test element.
+    var host = document.createElement('x-content-test');
     // Populate the initial pool of light DOM children.
     host.innerHTML = hostInnerHtml;
+    document.body.appendChild(host);
+    CustomElements.takeRecords();
     // Pretend we're stamping the template contents.
-    host.shadyRoot.innerHTML = shadowRootHtml
+    var div = document.createElement('div');
+    div.innerHTML = shadowRootHtml;
+    var frag = document.createDocumentFragment();
+    while (div.firstChild) {
+      frag.appendChild(div.firstChild);
+    }
+    host.shadyRoot.appendChild(frag);
     // Invoke distribution and verify the resulting tree.
     ShadyDom.flush();
     assert.strictEqual(getComposedHTML(host), expectedHtml);
@@ -75,7 +96,7 @@
   testRender('select ""', '<a href="">Link</a> <b>bold</b>',
              '<slot></slot>',
              '<a href="">Link</a> <b>bold</b>');
-  
+
   testRender('slot a',
              '<a slot="a">a</a> <a slot="b">b</a>',
              '<slot name="a"></slot>',
@@ -106,7 +127,7 @@
   host.innerHTML = '<a></a>';
   // pre-distirbution grab first composed node.
   var a = getComposedChildAtIndex(host, 0);
-  
+
   host.shadyRoot.innerHTML = '<x-content-test id="p"></x-content-test>';
   // force upgrade on polyfilled browsers
   var p = host.shadyRoot.firstChild;
@@ -159,7 +180,7 @@
 
   test('removeAllChildNodes - mutate host', function() {
     host.innerHTML = '<a>Hello</a>';
-    
+
     host.shadyRoot.innerHTML = '<slot>fallback</slot>';
     ShadyDom.flush();
     assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
@@ -176,7 +197,7 @@
 
   test('removeAllChildNodes - mutate shadow', function() {
     host.innerHTML = '<a>Hello</a>';
-    
+
     host.shadyRoot.innerHTML = '<slot></slot><b>after</b>';
     ShadyDom.flush();
     assert.strictEqual(getComposedHTML(host), '<a>Hello</a><b>after</b>');
@@ -192,7 +213,7 @@
 
   test('removeAllChildNodes - mutate shadow fallback', function() {
     host.innerHTML = '<a>Hello</a>';
-    
+
     host.shadyRoot.innerHTML = '<slot name="xxx"><b>fallback</b></slot>';
     var b = host.shadyRoot.firstChild.firstChild;
     ShadyDom.flush();
@@ -213,7 +234,7 @@
 
   test('removeChild - mutate host', function() {
     host.innerHTML = '<a>Hello</a>';
-    
+
     host.shadyRoot.innerHTML = '<slot>fallback</slot>';
     ShadyDom.flush();
     assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
@@ -247,7 +268,7 @@
 
   test('removeChild - mutate shadow', function() {
     host.innerHTML = '<a>Hello</a>';
-    
+
     host.shadyRoot.innerHTML = '<slot></slot><b>after</b>';
     var b = host.shadyRoot.lastChild;
     ShadyDom.flush();
@@ -269,7 +290,7 @@
   test('setAttribute slot', function() {
     host.innerHTML = '<a slot="a">Hello</a><b slot="b">World</b>';
 
-    
+
     host.shadyRoot.innerHTML = '<slot name="b">fallback b</slot>' +
                             '<slot name="a">fallback a</slot>';
     ShadyDom.flush();
@@ -325,7 +346,7 @@
   test('insertBefore - mutate shadow', function() {
     host.innerHTML = '<a>Hello</a>';
 
-    
+
     host.shadyRoot.innerHTML = '<slot></slot>';
     var content = host.shadyRoot.firstChild;
     ShadyDom.flush();
