Fixes #2276: avoid losing logical information and simplify logical tree handling

Author: Steven Orvell

src/lib/dom-api.html

@@ -64,19 +64,18 @@
       // container to container.host.
       // 3. node is <content> (host of container needs distribution)
       appendChild: function(node) {
-        var handled;
         this._removeNodeFromHost(node, true);
-        if (this._nodeIsInLogicalTree(this.node)) {
-          // if a <content> is added, make sure it's parent has logical info.
+        // if a <content> is added, make sure it's parent has logical info.
+        if (this.getOwnerRoot()) {
           this._ensureContentLogicalInfo(node);
+        }
+        if (this._nodeIsInLogicalTree(this.node)) {
           this._addLogicalInfo(node, this.node);
-          this._addNodeToHost(node);
-          handled = this._maybeDistribute(node, this.node);
-        } else {
-          this._addNodeToHost(node);
         }
+        this._addNodeToHost(node);
         // if not distributing and not adding to host, do a fast path addition
-        if (!handled && !this._tryRemoveUndistributedNode(node)) {
+        if (!this._maybeDistribute(node, this.node) && 
+          !this._tryRemoveUndistributedNode(node)) {
           // if adding to a shadyRoot, add to host instead
           var container = this.node._isShadyRoot ? this.node.host : this.node;
           addToComposedParent(container, node);
@@ -89,25 +88,24 @@
         if (!ref_node) {
           return this.appendChild(node);
         }
-        var handled;
         this._removeNodeFromHost(node, true);
-        if (this._nodeIsInLogicalTree(this.node)) {
-          // if a <content> is added, make sure it's parent has logical info.
+        // if a <content> is added, make sure it's parent has logical info.
+        if (this.getOwnerRoot()) {
           this._ensureContentLogicalInfo(node);
+        }
+        if (this._nodeIsInLogicalTree(this.node)) {
           var children = this.childNodes;
           var index = children.indexOf(ref_node);
           if (index < 0) {
             throw Error('The ref_node to be inserted before is not a child ' +
               'of this node');
           }
           this._addLogicalInfo(node, this.node, index);
-          this._addNodeToHost(node);
-          handled = this._maybeDistribute(node, this.node);
-        } else {
-          this._addNodeToHost(node);
         }
+        this._addNodeToHost(node);
         // if not distributing and not adding to host, do a fast path addition
-        if (!handled && !this._tryRemoveUndistributedNode(node)) {
+        if (!this._maybeDistribute(node, this.node) && 
+          !this._tryRemoveUndistributedNode(node)) {
           // if ref_node is <content> replace with first distributed node
           ref_node = ref_node.localName === CONTENT ?
             this._firstComposedNode(ref_node) : ref_node;
@@ -128,14 +126,8 @@
           console.warn('The node to be removed is not a child of this node',
             node);
         }
-        var handled;
-        if (this._nodeIsInLogicalTree(this.node)) {
-          this._removeNodeFromHost(node);
-          handled = this._maybeDistribute(node, this.node);
-        } else {
-          this._removeNodeFromHost(node);
-        }
-        if (!handled) {
+        this._removeNodeFromHost(node);
+        if (!this._maybeDistribute(node, this.node)) {
           // if removing from a shadyRoot, remove form host instead
           var container = this.node._isShadyRoot ? this.node.host : this.node;
           // not guaranteed to physically be in container; e.g.
@@ -249,9 +241,9 @@
       },
 
       _ensureContentLogicalInfo: function(node) {
-        if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-          saveLightChildrenIfNeeded(this.node);
-          var c$ = Array.prototype.slice.call(node.childNodes);
+        if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 
+          !node.__noContent) {
+          var c$ = factory(node).querySelectorAll(CONTENT);
           for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
             this._ensureContentLogicalInfo(n);
           }

test/unit/polymer-dom-content.html

@@ -62,10 +62,16 @@
 
 <dom-module id="x-dynamic-content">
   <template>
-    <div id="container">
-      <template is="dom-if" id="domif">
-        <content select=".insert" id="dynamicContent"></content>
-      </template>
+    <div>
+      <div>
+        <div>
+          <div id="container">
+            <template is="dom-if" id="domif">
+              <content select=".insert" id="dynamicContent"></content>
+            </template>
+          </div>
+        </div>
+      </div>
     </div>
   </template>
   <script>
@@ -950,7 +956,7 @@
       var div = document.createElement('div');
       div.classList.add('insert');
       Polymer.dom(el).appendChild(div);
-      assert(!el.querySelector('#container .insert'));
+      assert.ok(!el.querySelector('#container .insert'));
       el.$.domif.if = true;
       el.$.domif.render();
       Polymer.dom.flush();
@@ -978,7 +984,7 @@
       var div = document.createElement('div');
       div.classList.add('insert');
       Polymer.dom(el).appendChild(div);
-      assert(!el.querySelector('#redistContainer .insert'));
+      assert.ok(!el.querySelector('#redistContainer .insert'));
       el.$.redistDomif.if = true;
       el.$.redistContainer.$.domif.if = true;
       el.$.redistDomif.render();

test/unit/polymer-dom-elements.html

@@ -299,4 +299,33 @@
 <dom-module id="x-commented">
   <template><span>[</span><!--comment--><content></content></span><span>]</span></content></template>
   <script>Polymer({is: 'x-commented'});</script>
+</dom-module>
+
+
+<dom-module id="polymer-dom-repeat">
+  <template>
+    <div>
+      <div>
+        <div>
+          <div id="container">
+            <template is="dom-repeat" items="{{items}}">
+              <div>stuff</div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+  Polymer({
+    is: 'polymer-dom-repeat',
+    properties: {
+      items: {
+        value: function() {
+          return ['a', 'b', 'c', 'd', 'e'];
+        }
+      }
+    }
+  });
+  </script>
 </dom-module>

test/unit/polymer-dom.js

@@ -53,6 +53,14 @@ suite('Polymer.dom', function() {
     assert(Polymer.dom(p).querySelectorAll('content').length, 1);
   });
 
+  test('querySelectorAll with dom-repeat', function() {
+    var el = document.createElement('polymer-dom-repeat');
+    document.body.appendChild(el);
+    Polymer.dom.flush();
+    assert.equal(Polymer.dom(el.$.container).querySelectorAll('*').length, 6, 'querySelectorAll finds repeated elements');
+    document.body.removeChild(el);
+  })
+
   test('querySelector document', function() {
     assert.ok(Polymer.dom().querySelector('body'));
   });