Enhance robustness by replacing slot with a comment

This change makes the slot not depend on its nextSibling being stable in dom which is problematic if, for example, its nextSibling is a restamping dom-if which becomes false.

Author: Steven Orvell

lib/utils/templatize.html

@@ -176,15 +176,18 @@
             } else if (n.localName === 'slot') {
               if (hide) {
                 n.__polymerParent__ = n.parentNode;
-                n.__polymerSibling__ = n.nextSibling;
-                n.parentNode.removeChild(n);
+                n.__polymerReplaced__ = new Comment('hidden-slot');
+                n.parentNode.replaceChild(n.__polymerReplaced__, n);
               } else {
                 const parent = n.__polymerParent__;
-                if (parent) {
-                  parent.insertBefore(n, n.__polymerSibling__ || null);
+                const replace = n.__polymerReplaced__;
+                if (parent && replace) {
+                  parent.replaceChild(n, n.__polymerReplaced__);
                 }
               }
-            } else if (n.style) {
+            }
+
+            else if (n.style) {
               if (hide) {
                 n.__polymerDisplay__ = n.style.display;
                 n.style.display = 'none';

test/unit/dom-if-elements.html

@@ -193,11 +193,11 @@
 <dom-module id="x-slot">
     <template>
       <template id="domIf" is="dom-if" if>
-        <div>stuff</div>
-        <slot name="one"></slot>
-        <slot name="two"></slot>
+        <div class="stuff">stuff</div>
+        <slot id="one" name="one"></slot><template id="innerIf" is="dom-if" if restamp>hi</template>
+        <slot id="two" name="two"></slot>
         {{text}}
-        <slot name="three"></slot>
+        <slot id="three" name="three"></slot>
       </template>
     </template>
     <script>

test/unit/dom-if.html

@@ -564,21 +564,31 @@
         document.body.appendChild(x);
         x.$.domIf.render();
         let stamped = x.shadowRoot.childNodes;
-        assert.equal(stamped.length, 12);
+        assert.equal(stamped.length, 14);
         assert.equal(stamped[4].assignedNodes()[0], one);
-        assert.equal(stamped[6].assignedNodes()[0], two);
-        assert.equal(stamped[8].assignedNodes()[0], three);
+        assert.equal(stamped[8].assignedNodes()[0], two);
+        assert.equal(stamped[10].assignedNodes()[0], three);
         x.$.domIf.if = false;
         x.$.domIf.render();
         stamped = x.shadowRoot.childNodes;
-        assert.equal(stamped.length, 9);
+        assert.equal(stamped.length, 14);
         x.$.domIf.if = true;
         x.$.domIf.render();
         stamped = x.shadowRoot.childNodes;
-        assert.equal(stamped.length, 12);
+        assert.equal(stamped.length, 14);
+        assert.equal(stamped[4].assignedNodes()[0], one);
+        assert.equal(stamped[8].assignedNodes()[0], two);
+        assert.equal(stamped[10].assignedNodes()[0], three);
+        x.$.domIf.if = false;
+        x.$.domIf.render();
+        const innerIf = x.shadowRoot.querySelector('#innerIf');
+        innerIf.if = false;
+        innerIf.render();
+        x.$.domIf.if = true;
+        x.$.domIf.render();
         assert.equal(stamped[4].assignedNodes()[0], one);
-        assert.equal(stamped[6].assignedNodes()[0], two);
-        assert.equal(stamped[8].assignedNodes()[0], three);
+        assert.equal(stamped[7].assignedNodes()[0], two);
+        assert.equal(stamped[9].assignedNodes()[0], three);
         document.body.removeChild(x);
       });