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.
Why it exists
Standard components pass data down via props. But what if a generic component, like a list renderer, needs to let its parent decide how to display each item? Slot props solve this by allowing the child to yield data back up to the parent's provided slot content, inverting control.
The mental model
Think of a slot with props as a function call for your UI. The child component (e.g., <FancyList>) "calls" the slot for each item in its loop, passing the item data as an argument. The parent component, using the let: directive, receives that argument and uses it to render the content. The child manages the data and iteration, while the parent controls the presentation.
How it works
Inside a child component, you add props to the <slot> element: <slot item={data}>. In the parent component, you use the let: directive on the component tag to capture those props: <MyComponent let:item={itemData}>. The itemData variable is now available inside the <MyComponent> tags. The shorthand let:item is equivalent to let:item={item}. For named slots, the let: directive is placed on the element with the slot="name" attribute, not the main component tag.
When to use it
Use slot props for creating highly reusable "headless" or layout components. A prime example is a generic list, table, or dropdown component that handles the looping, state, and logic, but leaves the final rendering of each item entirely up to the consumer of the component.
When not to use it
If the child component's internal data doesn't need to be exposed for custom rendering, don't use slot props. Simple props-down data flow is sufficient for most cases where the child component has a fixed, non-customizable rendering structure. Overusing it can complicate simple components unnecessarily.
One canonical example
A FancyList component iterates through items but lets the parent decide the markup. Child (FancyList.svelte): <ul> {#each items as item} <li> <slot item={item}></slot> </li> {/each} </ul>. Parent (App.svelte): <FancyList {items} let:item> Item name: {item.name} </FancyList>. Here, FancyList owns the loop but passes each item back up. The parent receives it via let:item and renders a custom div.
Interview question
When would you primarily use Svelte slot props?
- a.To allow a child component to define the visual appearance of its content while the parent supplies the data.
- b.When a child component needs to trigger a method in its parent component based on an internal event.
- c.When a parent needs to pass a complex object as a prop to a child component's default slot.
- d.To enable a generic child component to provide data for each item, letting the parent customize the rendering of those items.Correct
Why? this is the answer
Slot props allow a child component to pass its internal data up to the parent for custom rendering, enabling the parent to control the presentation of items managed by the child. Option A describes the inverse control flow, where the child defines rendering and the parent supplies data, which is not the primary purpose of slot props.
Just read this? Test yourself on what you have been reading.
Read the original → svelte.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on svelte — each one lists the topics its interview covers.
See open roles