Implement <svelte:fragment slot="name">

[tanhauhau]

worked on top of the #4509 branch

• Fixes <slot slot="…"> (for passing slots through to child components) silently fails #2079 slot within slot via

<Component>
  <svelte:fragment>
     <slot />
  </svelte:fragment>
</Component>

• Fixes Add support for slotted components #1037 allow slotted components via making

<Component>
    <Inner slot="foo" />
</Component>

as a sugar syntax for

<Component>
   <svelte:fragment slot="foo">
       <Inner />
   </svelte:fragment>
</Component>

Fixes #5626

[rixo]

Oooh, this looks exciting! Has there been previous discussion about it? I mean, is there somewhere we can read/learn more about this?

[tanhauhau]

@rixo there's a rfc sveltejs/rfcs#18, but no one discussed about it.

and it is useful for supporting #1037

[tanhauhau]

Related to #1037

[Rich-Harris]

Just to reiterate the discussion on the RFC, there was a suggestion that we change <svelte:slot slot="foo"> to <svelte:fragment slot="foo">, since it's the counterpart to a <slot> rather than an equivalent to it

[Conduitry]

It looks like the test failures here are just some parsing things, probably because svelte:template has more characters than svelte:slot.

[tanhauhau]

Oops, I took quite some time on this PR.

I rewrote the PR, shifting bulk of the logic to src/compiler/compile/nodes/InlineComponent.ts, mainly try to treat any child elements / components with slot attribute as a sugar syntax of wrapping it with <svelte:fragment>.

That way, I can remove the slot attribute logic from both Elements and InlineComponents in render_dom and render_ssr.

[tanhauhau]

@Conduitry probably can help review it again? thanks.

[PatrickG]

May I ask what is holding this back?

[moreofmorris]

Would love to see this implemented! Was just running into an issue today that this would solve nicely! 😌

[ievoms]

When could we expect this to be implemented?

[ggchivalrous]

I also had this problem

 <MyInput placeholder="请输入内容">
      <MyButton slot="append" />
  </MyInput>
//  'slot' is reserved for future use in named slots

Hope to support

[Steakeye]

👍 from me in support of this being merged in ASAP!

[wagnerflo]

Yes please. I would like to have this, too!

[Steakeye]

🥳 Thanks!

[paulovieira]

This is fantastic! Thank you so much one again @tanhauhau! However I'm a bit confused about the previous approach of using "forward slots" (#2079 ).

Is the new <svelte:fragment slot="..."> equivalent to <slot slot="..."> (forward slot)?

I created a quick example and it seems the answer is yes. But it would be good to have a confirmation. Any advantages / disadvantages?

https://svelte.dev/repl/1b2f3fe9bc934e20b72d8b403b860d59?version=3.35.0

Thanks.

[tanhauhau]

@paulovieira no.

<slot> is creating a new default slot,
where the attribute slot="xxx" is to say whatever is inside this element will be placed inside the component's slot named "xxx"

thus,

<!-- B.svelte -->

<C>
   <slot name="xxx" slot="yyy" />
</C>

will place the content within the <slot name="xxx"> into Component C's yyy slot.

so what is the content within <slot name="xxx">?

that'll depend on the usage of Component B

<!-- A.svelte -->
<B>
   <div slot="xxx">this is the content for slot named xxx</div>
</B>

Lastly, the content within <slot name="xxx"> is the fallback content if the slot "xxx" is not provided.

Thus if you have

<!-- B.svelte -->
<C>
   <slot name="xxx" slot="yyy">fallback</slot>
</C>

<!-- A.svelte -->
<B />
<B>
   <div slot="xxx">some content</div>
</B>

you'll see fallback in the first <B /> and some content for the 2nd <B />

lastly, a closed github issues isn't somewhere to ask question