From ea0abb9585b7b3196268f92775bc3810b1efd314 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Fri, 15 Dec 2017 11:21:03 -0800
Subject: [PATCH] Templatize: remove slots when hiding children

Fixes #4977. When templatized content is hidden (via `_showHideChildren`) as in `dom-if` top level `<slot>` elements are now removed instead of being hidden. This ensures that assigned nodes are not displayed in false-y dom-if elements.
---
 lib/utils/templatize.html      |  12 +++
 test/unit/dom-if-elements.html |  22 +++++
 test/unit/dom-if.html          | 174 ++++++++++++++++++++-------------
 3 files changed, 139 insertions(+), 69 deletions(-)

diff --git a/lib/utils/templatize.html b/lib/utils/templatize.html
index c4290724e2..96e63cdc77 100644
--- a/lib/utils/templatize.html
+++ b/lib/utils/templatize.html
@@ -165,6 +165,18 @@
               } else {
                 n.textContent = n.__polymerTextContent__;
               }
+            // remove and replace slot
+            } else if (n.localName === 'slot') {
+              if (hide) {
+                n.__polymerParent__ = n.parentNode;
+                n.__polymerSibling__ = n.nextSibling;
+                n.parentNode.removeChild(n);
+              } else {
+                const parent = n.__polymerParent__;
+                if (parent) {
+                  parent.insertBefore(n, n.__polymerSibling__ || null);
+                }
+              }
             } else if (n.style) {
               if (hide) {
                 n.__polymerDisplay__ = n.style.display;
diff --git a/test/unit/dom-if-elements.html b/test/unit/dom-if-elements.html
index f6d39dac84..ea877ef653 100644
--- a/test/unit/dom-if-elements.html
+++ b/test/unit/dom-if-elements.html
@@ -190,6 +190,28 @@
   </script>
 </dom-module>
 
+<dom-module id="x-slot">
+    <template>
+      <template id="domIf" is="dom-if" if>
+        <div>stuff</div>
+        <slot name="one"></slot>
+        <slot name="two"></slot>
+        {{text}}
+        <slot name="three"></slot>
+      </template>
+    </template>
+    <script>
+    Polymer({
+      is: 'x-slot',
+      properties: {
+        text: {
+          value: 'Stuff'
+        }
+      }
+    });
+    </script>
+  </dom-module>
+
 <dom-module id="x-host">
   <template>
     <template id="domif" is="dom-if" if>
diff --git a/test/unit/dom-if.html b/test/unit/dom-if.html
index 99239f251a..8f9624b80f 100644
--- a/test/unit/dom-if.html
+++ b/test/unit/dom-if.html
@@ -95,7 +95,7 @@
     suite('nested pre-configured dom-if', function() {
 
       test('parent scope binding', function() {
-        var stamped = configured.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = configured.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         assert.equal(stamped[0].prop, 'outer');
         assert.equal(stamped[0].itemProp, 'outerItem');
@@ -106,7 +106,7 @@
       });
 
       test('parent scope downward notification', function() {
-        var stamped = configured.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = configured.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         configured.prop = 'yes';
         assert.equal(stamped[0].prop, 'yes');
         assert.equal(stamped[1].prop, 'yes');
@@ -118,7 +118,7 @@
       });
 
       test('parent upward upward notification', function() {
-        var stamped = configured.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = configured.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         stamped[2].prop = 'nice';
         assert.equal(configured.prop, 'nice');
         assert.equal(stamped[0].prop, 'nice');
@@ -127,8 +127,8 @@
       });
 
       test('dom-change event composed, bubbles outside dom-if scope', function() {
-        var domChangeFired = 0;
-        var domIf = configured.$['if-1'];
+        let domChangeFired = 0;
+        let domIf = configured.$['if-1'];
         configured.addEventListener('dom-change', function() {
           domChangeFired++;
         });
@@ -144,14 +144,14 @@
     suite('nested individually-controlled dom-if', function() {
 
       test('nothing stamped', function() {
-        var stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 0, 'total stamped count incorrect');
       });
 
       test('show 1', function() {
         individual.shouldStamp1 = true;
         individual.render();
-        var stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 1, 'total stamped count incorrect');
         assert.equal(stamped[0].prop, 'prop1');
         assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
@@ -160,7 +160,7 @@
       test('show 2', function() {
         individual.shouldStamp2 = true;
         individual.render();
-        var stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 2, 'total stamped count incorrect');
         assert.equal(stamped[0].prop, 'prop1');
         assert.equal(stamped[1].prop, 'prop2');
@@ -171,7 +171,7 @@
       test('show 3', function() {
         individual.shouldStamp3 = true;
         individual.render();
-        var stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         assert.equal(stamped[0].prop, 'prop1');
         assert.equal(stamped[1].prop, 'prop2');
@@ -184,7 +184,7 @@
       test('hide 3', function() {
         individual.shouldStamp3 = false;
         individual.render();
-        var stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
         assert.equal(getComputedStyle(stamped[1]).display, 'inline', 'stamped 2 display wrong');
@@ -194,7 +194,7 @@
       test('hide 2', function() {
         individual.shouldStamp2 = false;
         individual.render();
-        var stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
         assert.equal(getComputedStyle(stamped[1]).display, 'none', 'stamped 2 display wrong');
@@ -204,7 +204,7 @@
       test('hide 1', function() {
         individual.shouldStamp1 = false;
         individual.render();
-        var stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         assert.equal(getComputedStyle(stamped[0]).display, 'none', 'stamped 1 display wrong');
         assert.equal(getComputedStyle(stamped[1]).display, 'none', 'stamped 2 display wrong');
@@ -214,7 +214,7 @@
       test('show 1', function() {
         individual.shouldStamp1 = true;
         individual.render();
-        var stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
         assert.equal(getComputedStyle(stamped[1]).display, 'none', 'stamped 2 display wrong');
@@ -224,7 +224,7 @@
       test('show 2', function() {
         individual.shouldStamp2 = true;
         individual.render();
-        var stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
         assert.equal(getComputedStyle(stamped[1]).display, 'inline', 'stamped 2 display wrong');
@@ -234,7 +234,7 @@
       test('show 3', function() {
         individual.shouldStamp3 = true;
         individual.render();
-        var stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
         assert.equal(getComputedStyle(stamped[1]).display, 'inline', 'stamped 2 display wrong');
@@ -246,7 +246,7 @@
     suite('nested un-configured dom-if in document', function() {
 
       test('if=false: nothing rendered', function() {
-        var stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if)');
+        let stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if)');
         assert.equal(stamped.length, 0, 'total stamped count incorrect');
       });
 
@@ -254,11 +254,11 @@
         // first dom-if
         inDocumentIf.if = true;
         inDocumentIf.render();
-        var stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 1, 'total stamped count incorrect');
 
         // second dom-if
-        var xif = inDocumentContainer.querySelector('dom-if');
+        let xif = inDocumentContainer.querySelector('dom-if');
         xif.if = true;
         xif.render();
         stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
@@ -280,7 +280,7 @@
       test('if=false, restamp=false: everything hidden', function() {
         inDocumentIf.if = false;
         inDocumentIf.render();
-        var stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if)');
         stamped.forEach(function(n) {
@@ -292,7 +292,7 @@
         inDocumentIf.restamp = true;
         inDocumentIf.if = true;
         inDocumentIf.render();
-        var stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if)');
         stamped.forEach(function(n) {
@@ -305,7 +305,7 @@
         inDocumentIf.if = false;
         inDocumentIf.render();
         // 2nd one needed to force nested if to detach
-        var stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if)');
+        let stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if)');
         assert.equal(stamped.length, 0, 'total stamped count incorrect');
       });
 
@@ -314,11 +314,11 @@
         // first dom-if
         inDocumentIf.if = true;
         inDocumentIf.render();
-        var stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 1, 'total stamped count incorrect');
 
         // second dom-if
-        var xif = inDocumentContainer.querySelector('dom-if');
+        let xif = inDocumentContainer.querySelector('dom-if');
         xif.if = true;
         xif.render();
         stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
@@ -338,7 +338,7 @@
       });
 
       test('parent scope binding', function() {
-        var stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = inDocumentContainer.querySelectorAll('*:not(template):not(dom-if):not(span)');
         stamped[0].prop = 'outer';
         assert.equal(stamped[1].prop, 'outer');
         assert.equal(stamped[2].prop, 'outer');
@@ -349,7 +349,7 @@
     suite('nested un-configured dom-if', function() {
 
       test('if=false: nothing rendered', function() {
-        var stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if)');
+        let stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if)');
         assert.equal(stamped.length, 0, 'total stamped count incorrect');
       });
 
@@ -358,7 +358,7 @@
         unconfigured1.shouldStamp = true;
         unconfigured2.shouldStamp = true;
         unconfigured1.render();
-        var stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         stamped[0].prop = 'outer';
         assert.equal(unconfigured1.domUpdateHandlerCount, 1);
@@ -368,7 +368,7 @@
         unconfigured1.domUpdateHandlerCount = 0;
         unconfigured1.shouldStamp = false;
         unconfigured1.render();
-        var stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if)');
         stamped.forEach(function(n) {
@@ -382,7 +382,7 @@
         unconfigured1.$['if-1'].restamp = true;
         unconfigured1.shouldStamp = true;
         unconfigured1.$['if-1'].render();
-        var stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if)');
         stamped.forEach(function(n) {
@@ -396,7 +396,7 @@
         unconfigured1.$['if-1'].restamp = true;
         unconfigured1.shouldStamp = false;
         unconfigured1.$['if-1'].render();
-        var stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if)');
+        let stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if)');
         assert.equal(unconfigured1.domUpdateHandlerCount, 1);
         assert.equal(stamped.length, 0, 'total stamped count incorrect');
         assert.equal(unconfigured1.domUpdateHandlerCount, 1);
@@ -409,27 +409,27 @@
         unconfigured2.shouldStamp = true;
         unconfigured1.render();
         unconfigured2.render();
-        var stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         stamped[0].prop = 'outer';
         assert.equal(unconfigured1.domUpdateHandlerCount, 1);
       });
 
       test('parent scope binding', function() {
-        var stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         assert.equal(stamped[1].prop, 'outer');
         assert.equal(stamped[2].prop, 'outer');
       });
 
       test('parent upward upward notification', function() {
-        var stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         stamped[2].prop = 'nice';
         assert.equal(stamped[0].prop, 'nice');
         assert.equal(stamped[1].prop, 'nice');
       });
 
       test('event handlers', function() {
-        var stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
         stamped[0].fire('test1');
         assert.equal(unconfigured1.testHandler1Count, 1);
         stamped[1].fire('test2');
@@ -443,8 +443,8 @@
     suite('notification between two dom-ifs', function() {
 
       test('change to one scope doesn\'t affect other dom-if', function() {
-        var stamped1 = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
-        var stamped2 = unconfigured2.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped1 = unconfigured1.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
+        let stamped2 = unconfigured2.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)');
 
         unconfigured1.prop = 'foo';
         unconfigured2.prop = 'bar';
@@ -460,7 +460,7 @@
     suite('structured data controlling if', function() {
 
       test('item changed with no if field', function() {
-        var showing;
+        let showing;
         showing = structuredContainer.querySelector('.showing');
         assert.notOk(showing);
         structuredDomBind.item = {show: true};
@@ -481,7 +481,7 @@
       });
 
       test('item changed with no if field (restamp)', function() {
-        var showing;
+        let showing;
         structuredDomIf.restamp = true;
         structuredDomIf.if = false;
         structuredDomIf.render();
@@ -506,10 +506,10 @@
     suite('text node handling', function() {
 
       test('text nodes cleared on if=false', function() {
-        var x = document.createElement('x-textcontent');
+        let x = document.createElement('x-textcontent');
         document.body.appendChild(x);
         x.$.domIf.render();
-        var stamped = x.shadowRoot.childNodes;
+        let stamped = x.shadowRoot.childNodes;
         assert.equal(stamped.length, 12);
         assert.equal(stamped[7].textContent.trim(), 'Stuff');
         x.$.domIf.if = false;
@@ -526,10 +526,10 @@
       });
 
       test('binding to text nodes changed while if=false', function() {
-        var x = document.createElement('x-textcontent');
+        let x = document.createElement('x-textcontent');
         document.body.appendChild(x);
         x.$.domIf.render();
-        var stamped = x.shadowRoot.childNodes;
+        let stamped = x.shadowRoot.childNodes;
         assert.equal(stamped.length, 12);
         assert.equal(stamped[7].textContent.trim(), 'Stuff');
         x.$.domIf.if = false;
@@ -548,14 +548,50 @@
 
     });
 
+    suite('slot handling', function() {
+
+      test('slots removed on if=false', function() {
+        let x = document.createElement('x-slot');
+        let one = document.createElement('div');
+        one.slot = 'one';
+        x.appendChild(one);
+        let two = document.createElement('div');
+        two.slot = 'two';
+        x.appendChild(two);
+        let three = document.createElement('div');
+        three.slot = 'three';
+        x.appendChild(three);
+        document.body.appendChild(x);
+        x.$.domIf.render();
+        let stamped = x.shadowRoot.childNodes;
+        assert.equal(stamped.length, 12);
+        assert.equal(stamped[4].assignedNodes()[0], one);
+        assert.equal(stamped[6].assignedNodes()[0], two);
+        assert.equal(stamped[8].assignedNodes()[0], three);
+        x.$.domIf.if = false;
+        x.$.domIf.render();
+        stamped = x.shadowRoot.childNodes;
+        assert.equal(stamped.length, 9);
+        x.$.domIf.if = true;
+        x.$.domIf.render();
+        stamped = x.shadowRoot.childNodes;
+        assert.equal(stamped.length, 12);
+        assert.equal(stamped[4].assignedNodes()[0], one);
+        assert.equal(stamped[6].assignedNodes()[0], two);
+        assert.equal(stamped[8].assignedNodes()[0], three);
+        document.body.removeChild(x);
+      });
+
+    });
+
     suite('attach/detach tests', function() {
 
       test('move domif (clients persist)', function(done) {
-        var domif = document.querySelector('#simple');
+        let domif = document.querySelector('#simple');
         domif.if = true;
         innerContainer.appendChild(domif);
         setTimeout(function() {
-          var clients = innerContainer.querySelectorAll('x-client');
+          let clients = innerContainer.querySelectorAll('x-client');
           // Same clients as before since move happened in one turn
           assert.equal(clients[0].uid, 0);
           assert.equal(clients[1].uid, 1);
@@ -568,15 +604,15 @@
       });
 
       test('remove, wait, append domif (clients recreated)', function(done) {
-        var domif = document.querySelector('#simple');
+        let domif = document.querySelector('#simple');
         domif.if = true;
         innerContainer.removeChild(domif);
         setTimeout(function() {
-          var clients = innerContainer.querySelectorAll('x-client');
+          let clients = innerContainer.querySelectorAll('x-client');
           assert.equal(clients.length, 0);
           innerContainer.appendChild(domif);
           setTimeout(function() {
-            var clients = outerContainer.querySelectorAll('x-client');
+            let clients = outerContainer.querySelectorAll('x-client');
             // New clients since removed for a turn
             assert.equal(clients[0].uid, 3);
             assert.equal(clients[1].uid, 4);
@@ -590,10 +626,10 @@
       });
 
       test('move host with domif (clients persist)', function(done) {
-        var host = document.createElement('x-host');
+        let host = document.createElement('x-host');
         outerContainer.appendChild(host);
         setTimeout(function() {
-          var clients = host.shadowRoot.querySelectorAll('x-client');
+          let clients = host.shadowRoot.querySelectorAll('x-client');
           // New clients created in host instance
           assert.equal(clients[0].uid, 6);
           assert.equal(clients[1].uid, 7);
@@ -603,7 +639,7 @@
           assert.equal(host.$.domif.previousElementSibling, clients[2]);
           innerContainer.appendChild(host);
           setTimeout(function() {
-            var clients = host.shadowRoot.querySelectorAll('x-client');
+            let clients = host.shadowRoot.querySelectorAll('x-client');
             // Clients in removed host persist
             assert.equal(clients[0].uid, 6);
             assert.equal(clients[1].uid, 7);
@@ -617,10 +653,10 @@
       });
 
       test('remove, wait, append host with domif (clients persist)', function(done) {
-        var host = document.createElement('x-host');
+        let host = document.createElement('x-host');
         outerContainer.appendChild(host);
         setTimeout(function() {
-          var clients = host.shadowRoot.querySelectorAll('x-client');
+          let clients = host.shadowRoot.querySelectorAll('x-client');
           // New clients created in host instance
           assert.equal(clients[0].uid, 9);
           assert.equal(clients[1].uid, 10);
@@ -640,7 +676,7 @@
             innerContainer.appendChild(host);
             setTimeout(function() {
               // Clients in removed host persist
-              var clients = host.shadowRoot.querySelectorAll('x-client');
+              let clients = host.shadowRoot.querySelectorAll('x-client');
               assert.equal(clients[0].uid, 9);
               assert.equal(clients[1].uid, 10);
               assert.equal(clients[2].uid, 11);
@@ -654,16 +690,16 @@
       });
 
       test('remove, append domif', function(done) {
-        var domif = document.querySelector('#simple');
-        var parent = domif.parentNode;
+        let domif = document.querySelector('#simple');
+        let parent = domif.parentNode;
         domif.if = true;
         parent.removeChild(domif);
         setTimeout(function() {
-          var clients = parent.querySelectorAll('x-client');
+          let clients = parent.querySelectorAll('x-client');
           assert.equal(clients.length, 0);
           parent.appendChild(domif);
           setTimeout(function() {
-            var clients = parent.querySelectorAll('x-client');
+            let clients = parent.querySelectorAll('x-client');
             assert.equal(clients[0].uid, 12);
             assert.equal(clients[1].uid, 13);
             assert.equal(clients[2].uid, 14);
@@ -676,9 +712,9 @@
       });
 
       test('move into doc fragment', function(done) {
-        var el = shouldBeRemoved;
+        let el = shouldBeRemoved;
         assert.equal(el.parentNode, removalContainer);
-        var frag = document.createDocumentFragment();
+        let frag = document.createDocumentFragment();
         frag.appendChild(toBeRemoved);
         setTimeout(function() {
           assert.equal(el.parentNode, null);
@@ -692,11 +728,11 @@
 
       test('move into shadow root', function(done) {
         if (Polymer.Settings.hasShadow) {
-          var el = shouldBeRemoved;
+          let el = shouldBeRemoved;
           assert.equal(el.parentNode, removalContainer);
-          var div = document.createElement('div');
+          let div = document.createElement('div');
           document.body.appendChild(div);
-          var frag = div.createShadowRoot();
+          let frag = div.createShadowRoot();
           frag.appendChild(toBeRemoved);
           setTimeout(function() {
             assert.equal(el.parentNode, frag);
@@ -722,7 +758,7 @@
       suite('ordering, restamp: ' + restamp, function() {
 
         test('effects in if not run when `if` goes false via property', function() {
-          var el = document.createElement('x-guard-prop');
+          let el = document.createElement('x-guard-prop');
           el.restamp = restamp;
           document.body.appendChild(el);
           el.bool = true;
@@ -737,7 +773,7 @@
         });
 
         test('effects in if not run when `if` goes false via inline function', function() {
-          var el = document.createElement('x-guard-inline');
+          let el = document.createElement('x-guard-inline');
           el.restamp = restamp;
           document.body.appendChild(el);
           el.bool = true;
@@ -752,7 +788,7 @@
         });
 
         test('effects in if not run when `if` goes false via computed property', function() {
-          var el = document.createElement('x-guard-computed');
+          let el = document.createElement('x-guard-computed');
           el.restamp = restamp;
           document.body.appendChild(el);
           el.bool = true;
@@ -767,7 +803,7 @@
         });
 
         test('effects in if not run when `if` goes false via object sub-property', function() {
-          var el = document.createElement('x-guard-object');
+          let el = document.createElement('x-guard-object');
           el.restamp = restamp;
           document.body.appendChild(el);
           el.obj = {bool: true};
@@ -782,7 +818,7 @@
         });
 
         test('effects in if not run when `if` goes false via computed from object sub-property', function() {
-          var el = document.createElement('x-guard-object-computed');
+          let el = document.createElement('x-guard-object-computed');
           el.restamp = restamp;
           document.body.appendChild(el);
           el.obj = {bool: true};
@@ -797,7 +833,7 @@
         });
 
         test('effects in if not run when `if` goes false via setProperties batch', function() {
-          var el = document.createElement('x-guard-separate-props');
+          let el = document.createElement('x-guard-separate-props');
           el.restamp = restamp;
           document.body.appendChild(el);
           el.setProperties({a: 'ok', b: true});
@@ -812,7 +848,7 @@
         });
 
         test('host properties in sync when changed while false', function() {
-          var el = document.createElement('x-guard-separate-props');
+          let el = document.createElement('x-guard-separate-props');
           el.restamp = restamp;
           document.body.appendChild(el);
           el.a = 'ok';
@@ -831,7 +867,7 @@
         });
 
         test('host paths in sync when changed while false', function() {
-          var el = document.createElement('x-guard-separate-paths');
+          let el = document.createElement('x-guard-separate-paths');
           el.restamp = restamp;
           document.body.appendChild(el);
           el.obj = {a: 'ok', b: true};