0
0
mirror of https://github.com/sveltejs/svelte.git synced 2024-11-29 00:22:05 +01:00
svelte/documentation/docs/03-template-syntax/07-@render.md
2024-10-22 20:57:25 -04:00

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}