Svelte Slot Props: Child Informs, Parent Renders
Svelte slot props let a child component pass data up to its parent's slot. This is key for reusable list components where the child provides data for each item, but the parent controls the rendering. The footgun: the `let:` directive goes on the component tag.
Svelte's `let:` directive allows a child component to pass data up to its parent's slot content, inverting the usual data-down flow. It's crucial for building flexible list components where the child iterates and provides item data, but the parent defines the markup for each item. The common mistake is placing the `let:` directive inside the slot; it must be on the component tag itself (for default slots) or the element with the `slot` attribute.
Read the original → svelte.dev
- #svelte
- #slots
- #components
- #frontend
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.