Slots for content projection in Astro - Step-by-Step Execution

Concept Flow - Slots for content projection

Parent Component

↓

Defines <slot> placeholders

↓

Child Content Passed

↓

Content fills slots

↓

Render Final Output

The parent component defines slots as placeholders. Child content is passed and fills these slots, then the final output renders with projected content.

Execution Sample

Astro

<Parent>
  <slot name="header" />
  <slot />
</Parent>

<Parent>
  <h1 slot="header">Title</h1>
  <p>Body text</p>
</Parent>

Parent defines named and default slots; child content fills these slots when rendered.

Execution Table

Step	Action	Slot Name	Content Passed	Rendered Output
1	Parent reads <slot name="header" />	header	No content yet	<slot placeholder>
2	Parent reads default <slot />	default	No content yet	<slot placeholder>
3	Child passes <h1 slot="header">Title</h1>	header	Title heading	Slot 'header' filled with <h1>Title</h1>
4	Child passes <p>Body text</p>	default	Body text paragraph	Default slot filled with <p>Body text</p>
5	Render final output	header + default	Title heading + Body text	<h1>Title</h1><p>Body text</p>

💡 All slots filled with child content; rendering completes.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
slot 'header'	empty	<h1>Title</h1>	<h1>Title</h1>	<h1>Title</h1>
slot 'default'	empty	empty	<p>Body text</p>	<p>Body text</p>

Key Moments - 2 Insights

Why does the <h1> element appear in the 'header' slot and not the default slot?

Because the <h1> has slot="header" attribute, it fills the named 'header' slot as shown in execution_table step 3.

What happens if child content does not specify a slot name?

It fills the default slot, as shown in step 4 where <p> without slot attribute fills the default slot.

Visual Quiz - 3 Questions

Look at the execution_table, what content fills the default slot at step 4?

A <p>Body text</p>

B <h1>Title</h1>

C No content

D <slot placeholder>

💡 Hint

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

At which step does the 'header' slot get filled with content?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Slot Name' and 'Action' columns in execution_table.

If the child content did not include slot="header" on the <h1>, where would it render?

A In the 'header' slot anyway

B In the default slot

C Nowhere, it would be ignored

D It would cause an error

💡 Hint

Refer to key_moments about default slot behavior and execution_table step 4.

Concept Snapshot

Slots let parent components define placeholders.
Child content fills these slots by matching slot names.
Unnamed content fills the default slot.
This allows flexible content projection.
Slots render child content inside parent layout.

Full Transcript

Slots in Astro let a parent component define placeholders called slots. Child components pass content that fills these slots by matching slot names. If no slot name is given, content fills the default slot. The parent reads slots in order and renders the child content inside them. This process allows flexible layouts where parents control structure and children provide content. The execution table shows step-by-step how slots are read, filled, and rendered. Variables track slot content changes. Key moments clarify why slot names matter and how default slots work. The visual quiz tests understanding of slot filling and rendering steps.

Practice

1. What is the main purpose of using slots in Astro components?

easy

A. To define styles for a component

B. To handle component state

C. To insert custom content inside a component from outside

D. To fetch data from an API

Solution

1. Step 1: Understand what slots do

   Slots allow you to place custom content inside a component from outside it, making the component flexible.

2. Step 2: Compare with other options

   Styles, state, and data fetching are unrelated to slots' main purpose.

3. Final Answer:

   To insert custom content inside a component from outside -> Option C

4. Quick Check:

   Slots = insert custom content [OK]

Hint: Slots = placeholders for outside content inside components [OK]

Common Mistakes:

• Thinking slots manage styles or state
• Confusing slots with data fetching
• Believing slots are only for static content

2. Which of the following is the correct syntax to define a named slot called header in an Astro component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Astro slot syntax

   Named slots use the syntax to define where content goes.

2. Step 2: Check other options

   Other syntaxes like , , or are invalid in Astro.

3. Final Answer:

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

4. Quick Check:

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

Hint: Named slots use syntax [OK]

Common Mistakes:

• Using custom tags like
• Confusing named slots with other frameworks
• Omitting the name attribute

3. Given this Astro component usage:

<MyComponent>
  <h1 slot="title">Welcome</h1>
  <p>Enjoy your stay</p>
</MyComponent>

And inside MyComponent.astro you have:

<slot name="title" />
<slot />

What will be rendered?

medium

A. WelcomeEnjoy your stay

B. Enjoy your stayWelcome

C. Welcome

D. Enjoy your stay

Solution

1. Step 1: Match named slot content

   The <h1> has slot="title", so it fills <slot name="title" /> in the component.

2. Step 2: Match default slot content

   The <p> has no slot attribute, so it fills the default <slot />.

3. Final Answer:

   <h1>Welcome</h1><p>Enjoy your stay</p> -> Option A

4. Quick Check:

   Named slot + default slot = both contents rendered [OK]

Hint: Named slot content fills named slot; others fill default slot [OK]

Common Mistakes:

• Assuming order swaps between slots
• Ignoring slot attribute on elements
• Thinking default slot only renders named slot content

4. What is wrong with this Astro component usage?

<MyComponent>
  <div slot="footer">Footer content</div>
</MyComponent>

And inside MyComponent.astro you have:

<slot name="header" />
<slot />

medium

A. The slot named "footer" is not defined inside the component

B. Slots cannot be used with <div> elements

C. The default slot is missing a name attribute

D. The component must have only one slot

Solution

1. Step 1: Check slot names in component

   The component defines slots named "header" and default (unnamed), but no "footer" slot.

2. Step 2: Check usage slot names

   The usage tries to fill a "footer" slot which does not exist, so content won't render.

3. Final Answer:

   The slot named "footer" is not defined inside the component -> Option A

4. Quick Check:

   Undefined slot name = no content rendered [OK]

Hint: Slot names must match exactly between usage and component [OK]

Common Mistakes:

• Thinking any slot name works without definition
• Believing slot attribute restricts element types
• Assuming default slot needs a name

5. You want to create a reusable Card component with slots for header, body, and footer. Which Astro component code correctly sets up these named slots?

hard

A.

B.

C.

D.

Solution

1. Step 1: Recall correct slot syntax

   Named slots in Astro use self-closing tags like <slot name="name" /> to define placeholders.

2. Step 2: Evaluate options

   <slot name="header" /> <slot name="body" /> <slot name="footer" /> uses correct self-closing syntax for all three slots. <slot-header /> <slot-body /> <slot-footer /> uses invalid custom tags. <slot name="header"> <slot name="body"> <slot name="footer"> nests slots incorrectly. <slot name="header"></slot> <slot name="body"></slot> <slot name="footer"></slot> uses non-self-closing tags which Astro does not support for slots.

3. Final Answer:

   <slot name="header" /> <slot name="body" /> <slot name="footer" /> -> Option B

4. Quick Check:

   Named slots = self-closing <slot name="..." /> [OK]

Hint: Use self-closing for named slots [OK]

Common Mistakes:

• Using custom tags instead of <slot>
• Nesting slots inside each other
• Using non-self-closing slot tags