Slot basics (default slot) in Svelte - Step-by-Step Execution

Concept Flow - Slot basics (default slot)

Parent Component

↓

Uses Child Component

↓

Child Component Template

↓

Default Slot Placeholder

↓

Parent Content Rendered Here

The parent component passes content inside the child component tags. The child component renders this content where the default slot is placed.

Execution Sample

Svelte

<!-- Child.svelte -->
<div>
  <slot></slot>
</div>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
</script>

<Child>
  <p>Hello from parent!</p>
</Child>

Child component renders whatever content the parent places inside its tags at the slot location.

Execution Table

Step	Component	Action	Content Rendered	Result
1	Parent	Starts rendering	N/A	Prepares to render Child with inner content
2	Parent	Passes <p>Hello from parent!</p> as slot content	N/A	Child receives slot content
3	Child	Renders <div>	<slot> placeholder found	Waits for slot content
4	Child	Inserts slot content <p>Hello from parent!</p>	<div><p>Hello from parent!</p></div>	Final rendered output
5	Parent	Rendering complete	<div><p>Hello from parent!</p></div>	Page shows parent's content inside Child's div

💡 Rendering ends after Child inserts parent's slot content inside its div

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
slotContent	undefined	<p>Hello from parent!</p>	<p>Hello from parent!</p>	<p>Hello from parent!</p>

Key Moments - 2 Insights

Why does the content inside <Child> tags appear inside the Child component?

Because the Child component has a <slot> tag which acts as a placeholder for any content passed from the Parent, as shown in execution_table step 4.

What happens if the Child component does not have a <slot> tag?

The content passed from the Parent will not be rendered anywhere inside Child, so it will not appear in the output. This is implied by the slotContent variable being undefined if no <slot> exists.

Visual Quiz - 3 Questions

Look at the execution table, what content does the Child component insert at step 4?

A <div></div>

B <slot></slot>

C <p>Hello from parent!</p>

D No content

💡 Hint

Check the 'Content Rendered' column at step 4 in the execution_table

At which step does the Parent pass content to the Child's slot?

A Step 2

B Step 3

C Step 1

D Step 5

💡 Hint

Look at the 'Action' column describing content passing in execution_table

If the Child component did not have a <slot> tag, what would happen to the slotContent variable?

A It would contain the parent's content

B It would be undefined

C It would cause an error

D It would be empty string

💡 Hint

Refer to variable_tracker showing slotContent value when no slot is present

Concept Snapshot

Svelte default slots let a child component display content passed from its parent.
Use <slot></slot> in the child template as a placeholder.
Parent places content inside child tags to fill the slot.
Without <slot>, parent's content is not rendered.
Slots enable flexible component composition.

Full Transcript

In Svelte, a default slot is a placeholder inside a child component where content from the parent component is inserted. The parent writes content between the child component's tags. The child component uses the <slot> tag to mark where this content should appear. During rendering, Svelte replaces the <slot> with the parent's content. If the child does not have a <slot>, the parent's content is ignored. This allows components to be flexible and reusable by letting parents customize parts of their content.