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.
Polymer · Dec 15, 2017 · ea0abb9 · ea0abb9
1 parent 84abed1
commit ea0abb9
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 69 deletions.
diff --git 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
@@ -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>