Default and Named Snippets
Provide fallback snippets and name multiple snippet slots in a component.
Default Snippet
Content placed inside a component's tags becomes the default snippet, accessible via children.
<Card>
<p>Inside the card</p>
</Card>In the Component
Render the default content with the children prop.
let { children } = $props();
<div class="card">
{@render children()}
</div>All lessons in this course
- $props() for Typed Props
- {#snippet} and {@render}
- Passing Snippets as Props
- Default and Named Snippets