Slots for content projection in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What content will be rendered in the default slot?

Given this Astro component using slots, what will appear inside the <main> tag when rendered?

Astro

/* Parent.astro */
---
import Layout from './Layout.astro';
---
<Layout>
  <p>Hello, world!</p>
</Layout>

/* Layout.astro */
---
---
<html>
  <body>
    <header>Site Header</header>
    <main><slot /></main>
    <footer>Site Footer</footer>
  </body>
</html>

A Nothing will render inside <main>

B Site Header

C <p>Hello, world!</p>

D Site Footer

💡 Hint

Remember that the default slot renders whatever is placed between the component tags.

The <slot /> tag in Layout.astro acts as a placeholder for the content passed between <Layout> tags. Here, <p>Hello, world!</p> is passed and rendered inside <main>.

📝 Syntax

intermediate

Which option correctly defines a named slot in Astro?

Choose the correct syntax to define a named slot called sidebar inside an Astro component.

A <slot name="sidebar" />

B <slot id="sidebar" />

C <slot slot="sidebar" />

D <slot-area name="sidebar" />

💡 Hint

Named slots use the name attribute on the <slot> tag.

In Astro, named slots are declared with <slot name="slotName" />. The other options use incorrect attributes or tags.

❓ state_output

advanced

What is the rendered output of this Astro component with multiple slots?

Consider this Astro component and its usage. What will be the final HTML output?

Astro

/* Card.astro */
---
---
<article>
  <header><slot name="title" /></header>
  <section><slot /></section>
  <footer><slot name="footer" /></footer>
</article>

/* Usage.astro */
---
import Card from './Card.astro';
---
<Card>
  <p>This is the main content.</p>
  <h2 slot="title">Card Title</h2>
  <small slot="footer">Footer text</small>
</Card>

A <article><header><h2>Card Title</h2></header><section></section><footer><small>Footer text</small></footer></article>

B <article><header><p>This is the main content.</p></header><section></section><footer><small>Footer text</small></footer></article>

C <article><header></header><section><p>This is the main content.</p></section><footer></footer></article>

D <article><header><h2>Card Title</h2></header><section><p>This is the main content.</p></section><footer><small>Footer text</small></footer></article>

💡 Hint

Remember that unnamed content goes to the default slot, and named content goes to matching named slots.

The <h2> with slot="title" fills the <slot name="title" /> in header. The <p> without slot fills the default slot in section. The <small> with slot="footer" fills the footer slot.

🔧 Debug

advanced

Why does this Astro component fail to render the named slot content?

Given this Astro component and usage, why does the content for the named slot header not appear?

Astro

/* Layout.astro */
---
---
<div>
  <slot name="head" />
  <slot />
</div>

/* Page.astro */
---
import Layout from './Layout.astro';
---
<Layout>
  <h1 slot="header">Welcome</h1>
  <p>Main content here.</p>
</Layout>

A The slot name in Layout is 'head', but usage uses 'header', so they don't match.

B Astro does not support named slots, so named content is ignored.

C The default slot overrides all named slots, so named slots are ignored.

D The slot attribute must be on the Layout component, not on children elements.

💡 Hint

Check the spelling of the slot names in both component and usage.

The component defines a slot named 'head', but the usage provides content for a slot named 'header'. Since names differ, the named slot content is not rendered.

🧠 Conceptual

expert

How does Astro handle fallback content inside slots?

Consider this Astro component with fallback content inside a slot. What will be rendered if the parent component does NOT provide any content for the slot?

Astro

<!-- Fallback.astro -->
<article>
  <slot>
    <p>No content provided.</p>
  </slot>
</article>

A <article></article>

B <article><p>No content provided.</p></article>

C <article><slot></slot></article>

D Rendering will fail with an error due to missing slot content.

💡 Hint

Slots can have default content that shows if no content is passed in.

Astro renders the fallback content inside the slot if no content is provided by the parent. Here, the paragraph 'No content provided.' will appear inside the article.

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