mirror of
https://github.com/sveltejs/svelte.git
synced 2024-11-29 00:22:05 +01:00
791 B
791 B
title: {@render ...}
To render a snippet, use a {@render ...}
tag.
{#snippet sum(a, b)}
<p>{a} + {b} = {a + b}</p>
{/snippet}
{@render sum(1, 2)}
{@render sum(3, 4)}
{@render sum(5, 6)}
The expression can be an identifier like sum
, or an arbitrary JavaScript expression:
{@render (cool ? coolSnippet : lameSnippet)()}
Optional snippets
If the snippet is potentially undefined — for example, because it's an incoming prop — then you can use optional chaining to only render it when it is defined:
{@render children?.()}
Alternatively, use an {#if ...}
block with an :else
clause to render fallback content:
{#if children}
{@render children()}
{:else}
<p>fallback content</p>
{/if}