javascript / intermediate
Snippet
Multi-Slot-Verteilung mit benannten Slots
Benannte Slots ermöglichen es einer Komponente, mehrere Inhaltsstücke zu akzeptieren und an bestimmten Stellen zu platzieren. Die Verwendung des 'slot'-Attributs auf Elementen im Elternteil ordnet diese dem entsprechenden 'name'-Attribut im Kind zu.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
<!-- Card.svelte --><div class="card"><header><slot name="header">Default Header</slot></header><main><slot>Standard content</slot></main></div><!-- App.svelte --><Card><h1 slot="header">Custom Title</h1><p>This goes into the default slot.</p></Card>
svelte
Erklärung
1
<slot name="header">
Definiert einen benannten Platzhalter mit optionalem Fallback-Inhalt.
2
slot="header"
Leitet das Element des Elternteils in den entsprechenden benannten Slot des Kindes.