Slots for content projection in Astro - Mini Project: Build & Apply

Slots for Content Projection in Astro

📖 Scenario: You are building a reusable card component for a blog website. The card should have a title area, a main content area, and a footer area. You want to allow different pages to insert their own content into these areas using slots.

🎯 Goal: Create an Astro component called BlogCard.astro that uses slots for content projection. Then use this component in a page, passing different content into the title, main, and footer slots.

📋 What You'll Learn

Create a component BlogCard.astro with three named slots: title, content, and footer.

Use semantic HTML elements inside BlogCard.astro: <article> for the card, <header> for the title, <section> for the main content, and <footer> for the footer.

Create a page index.astro that uses BlogCard and fills each slot with different text.

Ensure the slots are named exactly title, content, and footer.

💡 Why This Matters

🌍 Real World

Content projection with slots is used to build flexible, reusable UI components that can accept different content from their users. This is common in component-based frameworks and libraries.

💼 Career

Understanding slots and content projection is important for frontend developers working with modern frameworks like Astro, Vue, or Svelte. It helps create modular, maintainable code.

1

Create the BlogCard component with the HTML structure

Create a new Astro component file called BlogCard.astro. Inside it, write the HTML structure with an <article> element containing a <header>, a <section>, and a <footer> element. Do not add slots yet.

Astro

Hint

Use semantic HTML tags inside the component to create the card layout.

2

Add named slots inside BlogCard component

Inside BlogCard.astro, add three named slots: <slot name="title"></slot> inside <header>, <slot name="content"></slot> inside <section>, and <slot name="footer"></slot> inside <footer>.

Astro

Hint

Use the <slot> element with the name attribute inside each section.

3

Create index.astro and import BlogCard

Create a new page file called index.astro. Import the BlogCard component at the top using import BlogCard from './BlogCard.astro';. Then add the <BlogCard> component in the page body.

Astro

import BlogCard from './BlogCard.astro';



  

Hint

Use the import statement at the top and add the component tag in the markup.

4

Fill the named slots with content in index.astro

Inside the <BlogCard> component in index.astro, add three elements with the slot attribute set to title, content, and footer. Put the text My Blog Post in the title slot, This is the main content of the blog post. in the content slot, and Posted on June 1, 2024 in the footer slot.

Astro

import BlogCard from './BlogCard.astro';


  

Hint

Use elements like <h2>, <p>, and <small> with the slot attribute to fill the slots.

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