Skip to content

Commit

Permalink
Add support for slot->content transformation.
Browse files Browse the repository at this point in the history
Need to bikeshed opt-in attribute (currently "auto-content")
  • Loading branch information
kevinpschaaf committed Sep 19, 2016
1 parent ff6e884 commit ebf31ca
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 0 deletions.
18 changes: 18 additions & 0 deletions src/lib/annotations/annotations.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
40 changes: 40 additions & 0 deletions test/unit/polymer-dom-content.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit ebf31ca

Please sign in to comment.