Named Slots with slot="name"
Define multiple insertion points in a component using named slots.
Why Named Slots
Components often need multiple insertion points: a header, a body, and a footer for example.
Defining Named Slots
Add a name attribute to the slot element in the child.
<!-- Layout.svelte -->
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>All lessons in this course
- Default Slots for Content Projection
- Named Slots with slot="name"
- Slot Fallback Content
- Checking Slot Content with $$slots