iron-list icon indicating copy to clipboard operation
iron-list copied to clipboard

Distributed children with named slot doesn't work

Open cailyncodes opened this issue 7 years ago • 0 comments

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.

I'm your parent
This is going to be placed via a default slot! It's from the end users's light dom!
Child Element
My Item: 1
My Item: 2
My Item: 3

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.

I'm your parent
This is going to be placed via a default slot! It's from the end users's light dom!
My Item: 1
My Item: 2
My Item: 3
Child Element

Steps to reproduce

Create the above elements and open a browser.

Possible Solution

Work on supporting slots 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.

cailyncodes avatar Aug 17 '17 15:08 cailyncodes