javascript / beginner
Snippet
Content Projection with Slots
Slots allow components to accept and render arbitrary HTML content passed from a parent. This pattern is essential for creating reusable layout components like cards, modals, or wrappers.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
<!-- Card.svelte --><div class="card"><slot>Default content if nothing is provided</slot></div><!-- App.svelte --><Card><h2>Custom Header</h2><p>Custom body text.</p></Card>
svelte
Breakdown
1
<slot>
Acts as a placeholder for content passed from the parent component.
2
</slot>
Any content between the slot tags serves as a fallback if no content is provided.