Svelte 5 Slots are Confusing
Now, with Svelte 5 at pre-release, I feel I can express some confusion about slots in Svelte 5. In Svelte 4, slot and names slots where done in the following way:
ContactCard.svelte
<article class="contact-card"><h2><slot name="name"><span class="missing">Unknown name</span></slot></h2><div class="address"><slot name="address"><span class="missing">Unknown address</span></slot></div><div class="email"><slot name="email"><span class="missing">Unknown email</span></slot></div></article><style>...</style>
+page.svelte
<script> import ContactCard from './ContactCard.svelte';</script><ContactCard><span slot="name"> P. Sherman </span><span slot="address"> 42 Wallaby Way<br /> Sydney</span></ContactCard>
Pretty easy and straight forward in my humble opinion.
Svelte 5 Single Slot example
Component.svelte
<script> let { children } = $props();</script><div> {@render children()}</div>
+page.svelte
<script> import { Component } from '$lib';</script><Component> ...content...</Component>
Also easy...
My Question...
How do we do "named slots" in this new paradigm