javascript / beginner
Snippet
Inhalts-Projektion mit Slots
Slots ermöglichen es Komponenten, beliebigen HTML-Inhalt von einer Eltern-Komponente zu akzeptieren und zu rendern. Dieses Muster ist essenziell für die Erstellung wiederverwendbarer Layout-Komponenten wie Karten, Modals oder Wrapper.
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
Erklärung
1
<slot>
Dient als Platzhalter für Inhalte, die von der Eltern-Komponente übergeben werden.
2
</slot>
Inhalt zwischen den Slot-Tags dient als Fallback, falls kein Inhalt übergeben wird.