Auto-slotting components via <Host slot="component-name">

[gfellerph]

Context

Discussion: #3476

It's possible to render components with a slot attribute by default. This reduces the need for authors to specify the slot attribute every time.

Decision

Use auto-slotting only on components that are enforcing a parent-child relationship.

Consequences

Authors are able to reuse components also in default and other named slots but have to specify the slot attribute.

Example

Do

<post-list-item> can only be placed inside <post-list>. Enforce the relationship through auto-slotting.

post-list-item.tsx

<Host slot="post-list-item">...</Host>

Don't

A <post-closebutton> can be used in many different places. Don't use auto-slotting here.

post-closebutton.tsx

<Host slot="post-closebutton">...</Host>