Merge pull request #4993 from Polymer/dom-if-slot

Templatize: remove slots when hiding children
Polymer · Jan 31, 2018 · 62fd4c5 · 62fd4c5
2 parents b52ab81 + 1463e3b
commit 62fd4c5
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 70 deletions.
diff --git a/lib/utils/templatize.html b/lib/utils/templatize.html
@@ -172,7 +172,20 @@
               } else {
                 n.textContent = n.__polymerTextContent__;
               }
-            } else if (n.style) {
+            // remove and replace slot
+            } else if (n.localName === 'slot') {
+              if (hide) {
+                n.__polymerReplaced__ = document.createComment('hidden-slot');
+                n.parentNode.replaceChild(n.__polymerReplaced__, n);
+              } else {
+                const replace = n.__polymerReplaced__;
+                if (replace) {
+                  replace.parentNode.replaceChild(n, replace);
+                }
+              }
+            }
+
+            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
@@ -190,6 +190,28 @@
   </script>
 </dom-module>
 
+<dom-module id="x-slot">
+    <template>
+      <template id="domIf" is="dom-if" if>
+        <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 id="three" 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>