Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Distributed children with named slot doesn't work #479

Open
8 tasks done
cailyncodes opened this issue Aug 17, 2017 · 0 comments · May be fixed by #480
Open
8 tasks done

Distributed children with named slot doesn't work #479

cailyncodes opened this issue Aug 17, 2017 · 0 comments · May be fixed by #480

Comments

@cailyncodes
Copy link

cailyncodes commented Aug 17, 2017

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,

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10

but I expect it will affect all browsers.

cailyncodes pushed a commit to cailyncodes/iron-list that referenced this issue Aug 17, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant