Use slot prop in custom svelte component.

[TheComputerM]

We cannot use slot prop in custom components, this messes up components that work with flexbox and other tools that depend on component structure.

ChildComponent.svelte

<p> I need to be directly a child of ParentComponent.svelte</p>

ParentComponent.svelte

<div>
    <slot name="child" />
    <div class="content"><slot/></div>
</div>

App.svelte

import ChildComponent from "ChildComponent.svelte";
import ParentComponent from "ParentComponent.svelte";

<ParentComponent>
    <div slot="child">
        <ChildComponent />
    </div>
    This is the content
</ParentComponent>

This is the output

<div>
    <div>
        <p> I need to be directly a child of ParentComponent.svelte</p>
    </div>
    <div class="content">
        This is the content
    </div>
</div>

As you can see the <p> tag is not a direct child. I propose that slot be a reserved keyword and can used by any component.

[antony]

I have a feeling that this is covered by the one of the slots proposals, but I could be wrong. @tanhauhau can you clarify?

[pngwn]

I'm pretty sure #4556 would take care of this.

[Conduitry]

Yeah duplicate of #1037 and #2080 and probably some other issues. This would be handled by something like #4556.