From b76d81eec312aa38a8d2c0ebd6e45fcc56b7d617 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Mon, 29 Jan 2018 12:08:57 -0800
Subject: [PATCH] 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.
---
 lib/utils/templatize.html      | 13 ++++++++-----
 test/unit/dom-if-elements.html |  8 ++++----
 test/unit/dom-if.html          | 24 +++++++++++++++++-------
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/lib/utils/templatize.html b/lib/utils/templatize.html
index 52f9f05d13..319ea1a78e 100644
--- a/lib/utils/templatize.html
+++ b/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';
diff --git a/test/unit/dom-if-elements.html b/test/unit/dom-if-elements.html
index ea877ef653..a077feea22 100644
--- a/test/unit/dom-if-elements.html
+++ b/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>
diff --git a/test/unit/dom-if.html b/test/unit/dom-if.html
index 8f9624b80f..ffba5aa018 100644
--- a/test/unit/dom-if.html
+++ b/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);
       });