Svelte 5: inconsistent rendering behavior on `{#snippet}`

[katriellucas]

Describe the bug

Svelte is not consistent with its rendering when dealing with Snippets, as component authors, shouldn't we be allowed to conditionally render Snippets? I feel like this is an error/bug and things like the below code should be possible:

<!-- Example.svelte -->
<script>
  let { children } = $props()
</script>

<div>
  {@render children()}
</div>

<!-- App.svelte -->
<Example>
  {#if true} Even this is fine! {/if} <!-- This render -->
</Example>


<Example>
  {#if true}
    {#snippet children()}
      Wait, what? Why I'm not fine? <!-- This do not render -->
    {/snippet }
  {/if}
</Example>

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo2ST2vDMAzFv4rqDdZC0rB_l-CmG6OH3Qc9zD2ERiGGxDa22q2EfPfhJk3SdYUdZeu995NQzXJZomPxZ81UWiGL2asxLGB0ML5weywJWcCc3tmtf-Fua6WhRChBsjLaEqy-08qUCLnVFQg2j7qHeasWTCgeDTJV3zgljUGCXCqczhr4KKQD6Y41kNYTqKOup_GKEN5Sh3AfC8U782SsmfBTZjJqfxi3e94heFvIMrOoxuFp6XTrNqRD49n_8H6MgU_CENbFAagzULqdaAlhmFxEyxzI7tDPQ1dQ2i9B61RSAF9FSstjwPtdNZh3-jGhL2V-DfXpcg0nFljtUfX8p9mvWz2PrHrwRe2FTXKuYAGrdCZziRmLj2FBf2Jd33_PrESCuo-DBhZwa6w2bjr7dVk8k_t2xBeLKkN7vl0e-f9Lsk3zA49ADW4IAwAA

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 AMD Ryzen 5 3500U with Radeon Vega Mobile Gfx
    Memory: 2.84 GB / 9.88 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.3 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: 5.0.0-next.97 => 5.0.0-next.97

Severity

annoyance

[brunnerh]

Only snippets that are direct children of a component are passed as props, this is just a convenience feature (docs).

It should either be this way around:

<Example>
  {#snippet children()}
    {#if true}
      Conditional content
    {/if}
  {/snippet}
</Example>

Or, if you want the property to not always be set, something like:

{#snippet exampleChildren()}
    Content
{/snippet}
<Example children={condition ? exampleChildren : undefined} />

REPL

---

Side note, your non-working example is equivalent to this:

<Example>
  {#snippet children()}
    {#if true}
      {#snippet children()}
        Wait, what? Why I'm not fine? <!-- This do not render -->
      {/snippet}
    {/if}
  {/snippet}
</Example>

[katriellucas]

My bad, I see how it's, last example with nested children is a bit mindblowing but I understand, thanks.