Svelte 5: Docs - Migration of multiple named slots to children/snippets pattern

[roycrippen4]

Describe the bug

Migrating named slots to snippets and the @render children() pattern is not documented well, or is very difficult to find.

The new snippet system is great and a big step forward, thank you all for your hard work.
That being said, snippets and their relationship to a component's children seems under-documented.

The examples I found resembled the following:

<script>
  let { children } = $props();
</script>

{#if children}
  {@render children()}
{/if}

The only information I could find online about migrating named slots to snippets was this stack overflow article.

Proposed Documentation (adapted from the linked stack overflow post):

Svelte 4

Component Definition

<!-- ContactCard.svelte -->
<article>
  <!-- With fallback content  -->
  <slot name="name">
    <span>No name found!</span>
  </slot>

  <!-- Without fallback content  -->
  <slot name="address"></slot>
</article>

Component Usage

<script>
  import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
  <span slot="name"> P. Sherman </span>
  <span slot="address"> 34 Wallaby Way </span>
</ContactCard>

Svelte 5

Component Definition

<!-- ContactCard.svelte -->
<script>
  let { name, address } = $props();
</script>

<article>
  <!-- With fallback content -->
  {#if name}
    {@render name()}
  {:else}
    <span>No name found!</span>
  {/if}

  <!-- Without fallback content -->
  {@render address?.()}
</article>

Component Usage

<script>
  import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
  {#snippet name()}
    P. Sherman
  {/snippet}

  {#snippet address()}
    42 Wallaby Way <br />
    Sydney
  {/snippet}
</ContactCard>

Reproduction

docs issue

Logs

No response

System Info

docs issue

Severity

annoyance

[theRealProHacker]

I agree 100%. The only One place it's documented quite well is https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots (which makes sense). The only place where this is linked to is in the compile warnings page:

svelte/packages/svelte/messages/compile-warnings/template.md

Line 99 in cf56973

See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info.

Edit: It's also pretty well documented here: https://svelte.dev/docs/svelte/snippet#Passing-snippets-to-components

The reason it might be difficult to find is probably SEO, and not that the documentation is missing.