Allow slot='...' attribute on single top level element
See original GitHub issueIs your feature request related to a problem? Please describe.
I am working on a Component Library for myself. I would like to use the slot='...'
attribute in a component without being a child of the component. Currently i get the following error:
Element with a slot='...' attribute must be a child of a component or a descendant of a custom element
REPL: https://svelte.dev/repl/9fbd3ef30184481a9edae5dbde4e574b?version=3.35.0
Currently i have to use the slot name on the Component itself like this:
<Navbar>
...
<NavItem>
<NavIcon slot="icon">Icon 1</NavIcon>
<NavLabel slot="label">Label</NavLabel>
</NavItem>
...
</Navbar>
This feels somewhat redundant.
Describe the solution you’d like I would like to be able to directly insert the children without the slot name, because the child itself knows the slot name:
<Navbar>
...
<!-- I would like to use it like this, where the Component itself knows the slot -->
<NavItem>
<NavIcon>Icon 3</NavIcon>
<NavLabel>Label 3</NavLabel>
</NavItem>
...
</Navbar>
and in NavIcon.svelte:
<div slot="icon">
<slot />
</div>
Technically the component is a child of a component or a descendant of a custom element, If the slot='...'
attribute is restricted to be a single top level element of a component.
How important is this feature to you? Nice to have.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:5
- Comments:11 (1 by maintainers)
you can just do slot … https://svelte.dev/repl/8529d01291644a878ff2136660c88132?version=3.38.3 like this? else you might have to do something like this. the other examples dont work any more but they where a awkward
{#if $$slots.icon} <slot /> {/if}
The point of @vospascal solution is to have minimal components which only contain the default slot and no named slots and then you compose those minimal components using the component tag names removing the need for the
slot
attribute. Just as he shows in REPL. I’m actually using the same idea in a project of mine atm.One issue I do see with this solution is that components have to be provided in the correct order (since there is only one big default slot) unless you use somekind of flex/grid layout within the composing component to enable ordering/placement.