Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

How do we do "named slots" in in Svelte 5?

$
0
0

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


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>