Slots for content projection in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a slot in Astro framework?

A slot is a placeholder inside a component where you can insert custom content from the parent. It helps to make components flexible and reusable.

intermediate

How do you define a named slot in Astro?

You define a named slot by adding a <slot name="slotName" /> tag inside your component. The parent can then pass content to that slot by using

content

.

beginner

What happens if no content is passed to a slot in Astro?

If no content is passed to a slot, Astro renders the default content inside the <slot> tag, if any is provided. Otherwise, the slot remains empty.

intermediate

Why use slots instead of props for content in Astro components?

Slots allow you to pass complex HTML or components as content, not just simple data. This makes your components more flexible and lets you control layout better.

beginner

Show a simple example of using a default slot in Astro.

Inside your component: Default content here. When used: Custom content. The custom content replaces the slot content.

What tag is used to create a slot in an Astro component?

A <placeholder>

B <slot>

C <insert>

D <content>

The tag defines where the projected content will appear inside the component.

How do you pass content to a named slot called 'header' in Astro?

A <Component><div slot="header">...</div></Component>

B <Component><slot name="header">...</slot></Component>

C <Component header="..." />

D <Component slot="header">...</Component>

You pass content to a named slot by wrapping it in an element with the slot attribute matching the slot name.

What will happen if no content is provided for a slot with default content?

A The slot will be empty

B An error will occur

C The default content inside the slot will be shown

D The component will not render

If no content is passed, the default content inside the tag is rendered.

Why are slots useful in Astro components?

A They automatically style components

B They allow passing simple text only

C They replace the need for props

D They let you pass complex HTML or components as content

Slots let you insert complex content, making components more flexible.

Which of these is a correct way to define a default slot in Astro?

A <slot>Default content</slot>

B <slot name="default">Default content</slot>

C <slot-default>Default content</slot-default>

D <slot-content>Default content</slot-content>

A default slot is defined simply with without a name.

Explain how slots work in Astro and why they are useful.

Think about how you can insert custom content inside a reusable component.

Describe how to create and use a named slot in an Astro component with an example.

Focus on the syntax for naming slots and how to target them from outside.

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