Snippets

Snippets are reusable chunks of markup — they replace slots for most cases.

Defining a snippet

Declare a snippet with {#snippet name(args)} and render it with {@render name(args)}.

{#snippet row(label, value)}
  <tr><th>{label}</th><td>{value}</td></tr>
{/snippet}

<table>
  {@render row('Name', 'Ada')}
  {@render row('Role', 'Engineer')}
</table>

The children snippet

Content placed between component tags arrives as a children snippet — render it to build layout components.

<script>
  let { children } = $props();
</script>
<div class="card">{@render children?.()}</div>