Add support for slotted components

[elcobvg]

It would be nice if instead of only html elements, we could put components in named slots as well. Like this: <MyComponent slot="title">Title here</MyComponent>

[SilvanCodes]

Is there any progress on this one? What's the status? :)

[stanf0rd]

Agree with the proposal, it could be a usefull feature!

[cve]

+1

[Conduitry]

Just closed #2080 in favor of this one, and a brief summary of the conversation there is:

• We already are reserving a prop called slot so that we can do <Foo slot='bar'/> someday
• Another possible syntax is {#slot bar}<Foo/>{/slot}, which would also allow a bunch of DOM nodes and components inside the slot, without them needing to be from a single component

@pngwn raised a concern about syntax 2, which is that it would be an entirely different way of specifying slots, which I hear, and which I'm not sure what to do about.

[jerriclynsjohn]

Just closed #2080 in favor of this one, and a brief summary of the conversation there is:

• We already are reserving a prop called slot so that we can do <Foo slot='bar'/> someday
• Another possible syntax is {#slot bar}<Foo/>{/slot}, which would also allow a bunch of DOM nodes and components inside the slot, without them needing to be from a single component

@pngwn raised a concern about syntax 2, which is that it would be an entirely different way of specifying slots, which I hear, and which I'm not sure what to do about.

If this is getting implemented, I think I'll love to see both implemented. I can see a lot of use cases where I would like to encapsulate the component with additional wrappers and in another scenarios I would like to just use the component. Now i work around this using empty div but then at times it breaks the structure because of the div element and I'll have to add more class utilities to make it work. This will be a great addition for Svelte.

[Tbutnyakov]

I think this is very important feature to implement.
Because for now we need to wrap target components by useless wrapper nodes.
Anyway, thank you for awesome stuff, guys.
Looking forward to.

+1

[nickmanning214]

I would like this implemented. I don't like adding unnecessary divs.

[mattpilott]

I run into this on almost every project and end up doing this as a workaround:
:global([slot="content"])

This allows me to style that extra div in the component that contains the slots but it would be super nice to have <MyComponent slot="content"/> and eliminate that extra div