Merge pull request #3974 from Polymer/slot-support

Add support for slot->content transformation.
Polymer · Sep 22, 2016 · 18d0af6 · 18d0af6
2 parents ff6e884 + 11afc1f
commit 18d0af6
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 0 deletions.
diff --git a/src/lib/annotations/annotations.html b/src/lib/annotations/annotations.html
@@ -233,6 +233,9 @@
             !node.hasAttribute('preserve-content')) {
             this._parseTemplate(node, i, list, annote);
           }
+          if (node.localName == 'slot') {
+            node = this._replaceSlotWithContent(node);
+          }
           // collapse adjacent textNodes: fixes an IE issue that can cause
           // text nodes to be inexplicably split =(
           // note that root.normalize() should work but does not so we do this
@@ -267,6 +270,23 @@
       }
     },
 
+    _replaceSlotWithContent: function(slot) {
+      var content = slot.ownerDocument.createElement('content');
+      while (slot.firstChild) {
+        content.appendChild(slot.firstChild);
+      }
+      var attrs = slot.attributes;
+      for (var i=0; i<attrs.length; i++) {
+        var attr = attrs[i];
+        content.setAttribute(attr.name, attr.value);
+      }
+      var name = slot.getAttribute('name');
+      var select = name ? '[slot=\'' + name + '\']' : ':not([slot])'; 
+      content.setAttribute('select', select);
+      slot.parentNode.replaceChild(content, slot);
+      return content;
+    },
+
     // 1. Parse annotations from the template and memoize them on
     //    content._notes (recurses into nested templates)
     // 2. Remove template.content and store it in annotation list, where it

diff --git a/test/unit/polymer-dom-content.html b/test/unit/polymer-dom-content.html
@@ -29,6 +29,19 @@
   </script>
 </dom-module>
 
+<dom-module id="x-dist-slot">
+  <template>
+    x-dist
+    <div id="default"><slot id="defaultIP"><div>fallback for default</div></slot></div>
+    <div id="foo"><slot id="fooIP" name="foo"><div>fallback for foo</div></slot></div>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({is: 'x-dist-slot'});
+  });
+  </script>
+</dom-module>
+
 <dom-module id="x-dist-simple">
   <template>
     <content id="content"></content>
@@ -337,6 +350,42 @@
       document.body.removeChild(dist);
     });
 
+    test('append div to distributing element (auto <slot> to <content>)', function() {
+      var dist = document.createElement('x-dist-slot');
+      document.body.appendChild(dist);
+      assert.equal(dist.$.fooIP.localName, 'content');
+      assert.equal(dist.$.fooIP.getAttribute('select'), '[slot=\'foo\']');
+      assert.equal(dist.$.defaultIP.localName, 'content');
+      assert.equal(dist.$.defaultIP.getAttribute('select'), ':not([slot])');
+      assert.equal(Polymer.dom(dist.$.fooIP).getDistributedNodes()[0].textContent, 'fallback for foo');
+      assert.equal(Polymer.dom(dist.$.defaultIP).getDistributedNodes()[0].textContent, 'fallback for default');
+      // Distribute div
+      var frag = document.createDocumentFragment();
+      var foo1 = frag.appendChild(document.createElement('div'));
+      var default1 = frag.appendChild(document.createElement('div'));
+      var foo2 = frag.appendChild(document.createElement('div'));
+      var default2 = frag.appendChild(document.createElement('div'));
+      foo1.setAttribute('slot', 'foo');
+      foo2.setAttribute('slot', 'foo');
+      Polymer.dom(dist).appendChild(frag);
+      Polymer.dom.flush();
+      assert.equal(Polymer.dom(dist.$.fooIP).getDistributedNodes()[0], foo1);
+      assert.equal(Polymer.dom(dist.$.fooIP).getDistributedNodes()[1], foo2);
+      assert.equal(Polymer.dom(dist.$.defaultIP).getDistributedNodes()[0], default1);
+      assert.equal(Polymer.dom(dist.$.defaultIP).getDistributedNodes()[1], default2);
+      // Remove
+      Polymer.dom(dist).removeChild(foo1);
+      Polymer.dom(dist).removeChild(foo2);
+      Polymer.dom(dist).removeChild(default1);
+      Polymer.dom(dist).removeChild(default2);
+      Polymer.dom.flush();
+      assert.equal(Polymer.dom(dist.$.fooIP).getDistributedNodes()[0].textContent, 'fallback for foo');
+      assert.equal(Polymer.dom(dist.$.fooIP).getDistributedNodes()[1], null);
+      assert.equal(Polymer.dom(dist.$.defaultIP).getDistributedNodes()[0].textContent, 'fallback for default');
+      assert.equal(Polymer.dom(dist.$.defaultIP).getDistributedNodes()[1], null);
+      document.body.removeChild(dist);
+    });
+
     test('append div to non-distributing element', function() {
       var noDist = document.createElement('x-no-dist');
       document.body.appendChild(noDist);