Add support for slot->content transformation.

Need to bikeshed opt-in attribute (currently "auto-content")
Polymer · Sep 19, 2016 · ebf31ca · ebf31ca
1 parent ff6e884
commit ebf31ca
Show file tree

Hide file tree

Showing 2 changed files with 58 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.hasAttribute('auto-content')) {
+            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,21 @@
       }
     },
 
+    _replaceSlotWithContent: function(slot) {
+      var content = slot.ownerDocument.createElement('content');
+      var attrs = slot.attributes;
+      for (var i=0; i<attrs.length; i++) {
+        var attr = attrs[i];
+        if (attr.name == 'name') {
+          content.setAttribute('select', '[slot=\'' + attr.value + '\']');
+        } else {
+          content.setAttribute(attr.name, attr.value);
+        }
+      }
+      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,18 @@
   </script>
 </dom-module>
 
+<dom-module id="x-dist-slot">
+  <template>
+    x-dist
+    <div id="distWrapper"><slot id="content" name="foo" auto-content></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 +349,34 @@
       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);
+      // Distribute div
+      var div = document.createElement('div');
+      div.setAttribute('slot', 'foo');
+      Polymer.dom(dist).appendChild(div);
+      Polymer.dom.flush();
+      if (usingShady) {
+        assert.equal(dist.$.distWrapper.firstElementChild, div);
+      }
+      // Append to distributed div
+      var div2 = document.createElement('div');
+      Polymer.dom(div).appendChild(div2);
+      Polymer.dom.flush();
+      if (usingShady) {
+        assert.equal(dist.$.distWrapper.firstElementChild, div);
+        assert.equal(div.firstElementChild, div2);
+      }
+      // Remove
+      Polymer.dom(dist).removeChild(div);
+      Polymer.dom.flush();
+      if (usingShady) {
+        assert.equal(dist.$.distWrapper.firstElementChild, null);
+      }
+      document.body.removeChild(dist);
+    });
+
     test('append div to non-distributing element', function() {
       var noDist = document.createElement('x-no-dist');
       document.body.appendChild(noDist);