feat: Allow "slotAssignment: 'manual'"

[mayerraphael]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

It is currently not possible to set slotAssignment to manual. I guess all components created with StencilJS use the default "named" value. The behavior, that all nodes between the tags are added to the default slot is sometimes not useful.

This feature would allow that slots inside the WebComponent are not automatically filled, but the assignment of nodes to the slot can be done imperative via .assign.

I'm not 100% sure but another benefit would be that those imperative assigned slot nodes are referenced and don't have to be duplicated/cloned.

Describe the Use Case

We would like to control this for components that have dynamic data. For tables this would be especially useful, as nodes don't have to be cloned, but could be referenced (assigned) by the slot.

This is usable in general for all filterable or any other dynamic data, where just completly displaying a named slot is not suitable.

Describe Preferred Solution

@Component({
  tag: 'my-component',
  shadow: true,
  slotAssignment: 'manual' // default named, analog to the attachShadow props.
})

Describe Alternatives

No response

Related Code

No response

Additional Information

Documentation:

• https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Imperative-Shadow-DOM-Distribution-API.md#imperative-slotting-api
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assign
• https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

[rwaskiewicz]

Thanks @mayerraphael, I'm going to label this to get it ingested into our backlog. If I recall correctly, not all modern browsers support .assign() (although attachShadow#slotAssignment: boolean should be), and would need to be something we work through

[mayerraphael]

@rwaskiewicz If you need any help, just let me know.

[rvantonisse]

Any update on this? I am currently looking at ways to simplify component API to increase usability, by making named slot usage redundant. e.g. changing this:

<!-- From: -->
<my-component>
    <my-component-title slot="title">title</my-component-title>
</my-component>

<!-- To -->
<my-component>
    <my-component-title>title</my-component-title>
</my-component>

Like @mayerraphael I want to reuse the original element instead of creating clones and want to assign to designated slots manually.

[fgeierst]

Any update on this? slotAssignment is now supportet by all browser engines https://caniuse.com/mdn-api_shadowroot_slotassignment

[johnjenkins]

@fgeierst - sorry, no updates and not much capacity atm. Any help much obliged!