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.