javascript / beginner
Snippet
Content Distribution with Slots
Slots allow a component to accept and render content passed from its parent. This pattern is essential for creating flexible layout components like cards or modals.
snippet.js
javascript
1
2
3
4
<!-- Card.svelte --><div class="card"><slot>Default content if empty</slot></div>
svelte
Breakdown
1
<slot>
A placeholder where external content provided by the parent will be injected.
2
Default content if empty
The fallback content shown if the parent doesn't provide any children to the component.