iron-list
iron-list copied to clipboard
Distributed children with named slot doesn't work
Description
iron-list
doesn't support a template being distributed to it via a named slot.
Consider the following code:
<!-- child-el.html -->
<div>Child Element</div>
<iron-list items="{{items}}">
<slot></slot>
</iron-list>
<!-- parent-el.html -->
<div>I'm your parent</div>
<slot></slot>
<child-el items="{{items}}">
<slot name="test"></slot>
</child-el>
<!-- end-user-el.html -->
<parent-el items="[1,2,3]">
<div>This is going to be placed via a default slot! It's from the end users's light dom!</div>
<template slot="test">
<div>My Item: [[item]]</div>
</template>
</parent-el>
Expected outcome
The items get distributed to iron-list
's internal items div
.
Actual outcome
The items get distributed to the default slot of parent-el
. That is, when iron-list
templatizes and stamps the distributed template (which is distributed via a named slot in to parent-el
and a default slot to child-el
) it adds it to the dom as a child of the template's parent. In this case, end-user-el
. Because the div
element of the template
does not have a slot
attribute, it is distributed to the default slot
of parent-el
. It should be distributed to the "test" slot
of parent-el
, which then in turns distributes it to the default slot of child-el
, and so on to iron-list
.
Steps to reproduce
Create the above elements and open a browser.
Possible Solution
Work on supporting slot
s was addressed in issue #373 and solved in PR #375. However, it didn't consider this case. While it is possible to add the slot
attribute to the child element of the template
, it feels awkward, wrong, and unnecessary.
<parent-el items="[1,2,3]">
<div>This is going to be placed via a default slot! It's from the end users's light dom!</div>
<template slot="test">
<div slot="test">My Item: [[item]]</div>
</template>
</parent-el>
I debated for a while whether this should be considered an issue with Polymer.Templatizer
or iron-list
. I decided that there are probably cases where one would want more control and not have the children of a template element necessarily be distributed as the template was. However, in the case of iron-list
, I cannot think of a use case where the items shouldn't be distributed as children of iron-list
. So I think the best course of action is for iron-list
to have the stamped items to inherit the slot
attribute from the template
.
Browsers Affected
Only tested on Chrome,
- [x] Chrome
- [x] Firefox
- [x] Safari 9
- [x] Safari 8
- [x] Safari 7
- [x] Edge
- [x] IE 11
- [x] IE 10
but I expect it will affect all browsers.