Named slots in Svelte - Step-by-Step Execution

Concept Flow - Named slots

Parent Component

↓

Defines <Child> with named slots

↓

Parent passes content to named slots

↓

Child renders content in matching named slots

↓

Final rendered output shows slot content in place

The parent component provides content for named slots defined in the child component. The child places that content where the named slots are.

Execution Sample

Svelte

<!-- Child.svelte -->
<div>
  <header><slot name="header"/></header>
  <main><slot/></main>
  <footer><slot name="footer"/></footer>
</div>

Child component defines three slots: a named header slot, a default slot, and a named footer slot.

Execution Table

Step	Action	Slot Name	Content Passed	Rendered Output Section
1	Parent renders <Child>	header	<h1>Title</h1>	<header><h1>Title</h1></header>
2	Parent passes default slot content	default	<p>Main content here</p>	<main><p>Main content here</p></main>
3	Parent passes footer slot content	footer	<small>Footer info</small>	<footer><small>Footer info</small></footer>
4	Child renders all slots	all	All passed content	<div><header><h1>Title</h1></header><main><p>Main content here</p></main><footer><small>Footer info</small></footer></div>
5	No more slots to fill	none	none	Rendering complete

💡 All named slots filled with parent content; rendering finished.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
header slot content	empty	<h1>Title</h1>	<h1>Title</h1>	<h1>Title</h1>	<h1>Title</h1>
default slot content	empty	empty	<p>Main content here</p>	<p>Main content here</p>	<p>Main content here</p>
footer slot content	empty	empty	empty	<small>Footer info</small>	<small>Footer info</small>

Key Moments - 2 Insights

Why does the child component show content only where the named slot matches?

Because the child uses <slot name="..."> to place content only in matching named slots, as shown in steps 1-3 of the execution_table.

What happens if the parent does not provide content for a named slot?

The slot remains empty or shows fallback content if defined. This is implied by the exit_note and the empty start values in variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What content is passed to the default slot?

A <p>Main content here</p>

B <h1>Title</h1>

C <small>Footer info</small>

D No content

💡 Hint

Check the 'Content Passed' column at step 2 in execution_table.

At which step does the footer slot get its content?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Slot Name' column in execution_table for 'footer'.

If the parent omitted the header slot content, what would the 'header slot content' variable be after step 3?

A <h1>Title</h1>

B <p>Main content here</p>

C empty

D <small>Footer info</small>

💡 Hint

Refer to variable_tracker's 'header slot content' row and consider what happens if no content is passed.

Concept Snapshot

Named slots let a child component define multiple placeholders.
Parent passes content to these slots by name.
Child renders content only where slot names match.
Default slot catches content without a name.
If no content passed, slot is empty or shows fallback.
Useful for flexible layouts with multiple content areas.

Full Transcript

Named slots in Svelte allow a child component to define multiple placeholders for content. The parent component passes content to these slots by specifying slot names. The child component then renders the content only in the matching named slots. There is also a default slot for content without a name. If the parent does not provide content for a named slot, that slot remains empty or shows fallback content if defined. This mechanism helps build flexible components with multiple content areas. The execution table shows step-by-step how the parent passes content to each named slot and how the child renders it. The variable tracker shows the content stored for each slot at each step. Key moments clarify why content appears only in matching slots and what happens if content is missing. The visual quiz tests understanding of slot content placement and timing.

Practice

1. What is the main purpose of named slots in Svelte components?

easy

A. To allow placing content into specific parts of a component

B. To define component styles globally

C. To handle component state changes

D. To import external JavaScript files

Solution

1. Step 1: Understand what slots do

   Slots let you insert content inside a component from outside.

2. Step 2: Identify the role of named slots

   Named slots let you put content into specific places inside the component, not just one default spot.

3. Final Answer:

   To allow placing content into specific parts of a component -> Option A

4. Quick Check:

   Named slots = specific content placement [OK]

Hint: Named slots = content in specific component areas [OK]

Common Mistakes:

• Confusing slots with styling or state
• Thinking slots import files
• Assuming slots handle events

2. Which of the following is the correct syntax to define a named slot called header inside a Svelte component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall slot syntax in Svelte

   Svelte uses the <slot> tag with a name attribute to define named slots.

2. Step 2: Match correct attribute

   The attribute to name a slot is name, not id or custom tags.

3. Final Answer:

   <slot name="header"></slot> -> Option D

4. Quick Check:

   Named slot syntax = <slot name="..."> [OK]

Hint: Named slots use syntax [OK]

Common Mistakes:

• Using id instead of name attribute
• Using custom tags instead of <slot>
• Omitting the name attribute

3. Given this Svelte component usage:

<MyComponent>
  <div slot="title">Welcome</div>
  <div slot="footer">Goodbye</div>
</MyComponent>

And inside MyComponent.svelte you have:

<slot name="title">Default Title</slot>
<slot name="footer">Default Footer</slot>

What will be rendered in the browser?

medium

A. Default Title and Default Footer ignoring the passed content

B. Only Welcome is shown, Goodbye is ignored

C. Welcome and Goodbye in their respective slot positions

D. An error occurs because slots are not used correctly

Solution

1. Step 1: Understand slot filling

   Content with slot="title" fills the named slot "title" in the component.

2. Step 2: Match passed content to slots

   The <div slot="title">Welcome</div> replaces the default title slot content, same for footer.

3. Final Answer:

   Welcome and Goodbye in their respective slot positions -> Option C

4. Quick Check:

   Named slots filled = passed content shown [OK]

Hint: Content with slot="name" replaces default slot content [OK]

Common Mistakes:

• Thinking default slot content always shows
• Assuming only default slot works
• Confusing slot attribute usage

4. What is wrong with this usage of named slots?

<MyComponent>
  <div slot="header">Hello</div>
  <div slot="footer">Bye</div>
  <div slot="header">Again</div>
</MyComponent>

Assuming MyComponent defines named slots header and footer.

medium

A. Slots must be direct children of the component, so this is invalid

B. Multiple elements use the same slot name 'header', causing only the last to render

C. Slot names must be unique and cannot be reused in the same component usage

D. There is no error; all content will render in the header slot

Solution

1. Step 1: Check multiple slot usage

   When multiple elements use the same slot name, only the last one is rendered in that slot.

2. Step 2: Understand slot content replacement

   The first header content is replaced by the second because slots accept one content block per name.

3. Final Answer:

   Multiple elements use the same slot name 'header', causing only the last to render -> Option B

4. Quick Check:

   Duplicate slot names = last content wins [OK]

Hint: Only one content block per named slot is rendered [OK]

Common Mistakes:

• Thinking all duplicates render together
• Believing slot names must be unique globally
• Assuming nested slots behave differently

5. You want to create a Svelte component Card with named slots for header, content, and footer. You also want to provide default content for each slot if none is passed. Which code snippet correctly implements this?

hard

A. Default Header
Default Content
Default Footer

B. Default Header
Default Content
Default Footer

C.

D. Default Header
Default Content
Default Footer

Solution

1. Step 1: Use correct named slot syntax with default content

   Named slots require name attribute and default content inside the slot tags.

2. Step 2: Verify all slots have names and defaults

   Default Header Default Content Default Footer correctly names all slots and provides default text inside each slot tag.

3. Final Answer:

   <slot name="header">Default Header</slot> <slot name="content">Default Content</slot> <slot name="footer">Default Footer</slot> -> Option A

4. Quick Check:

   Named slots with defaults = <slot name="...">default</slot> [OK]

Hint: Named slots need name attribute and default content inside [OK]

Common Mistakes:

• Omitting name attribute
• Using slot attribute without value
• Mixing default slot with named slots incorrectly