AstroHow-ToBeginner · 3 min read

How to Use Slots in Astro Components: Simple Guide

In Astro, use <slot> inside a component to define where passed content will appear. When using the component, place content between its tags to fill the slot dynamically.

📐

Syntax

Slots in Astro allow you to pass content from a parent component to a child component. Use <slot> inside the child component to mark where the passed content should appear. You can also name slots with name attribute for multiple content areas.

<slot>: Default slot for unnamed content.
<slot name="slotName">: Named slot for specific content.
In the parent, place content inside the component tags or use slot="slotName" attribute to target named slots.

astro

<!-- ChildComponent.astro -->
<div>
  <header>
    <slot name="header" />
  </header>
  <main>
    <slot />
  </main>
  <footer>
    <slot name="footer" />
  </footer>
</div>

💻

Example

This example shows a component with a default slot and two named slots. The parent passes different content to each slot, which the component displays in the correct places.

astro

<!-- Layout.astro -->
<div style="border: 1px solid #ccc; padding: 1rem;">
  <header style="background: #eee; padding: 0.5rem;">
    <slot name="header" />
  </header>
  <section style="margin: 1rem 0;">
    <slot />
  </section>
  <footer style="background: #eee; padding: 0.5rem; font-size: 0.8rem;">
    <slot name="footer" />
  </footer>
</div>

---

<!-- Usage.astro -->
---
import Layout from './Layout.astro';
---
<Layout>
  <h1 slot="header">Welcome to My Site</h1>
  <p>This is the main content inside the default slot.</p>
  <small slot="footer">© 2024 My Site</small>
</Layout>

Output

<div style="border: 1px solid #ccc; padding: 1rem;"> <header style="background: #eee; padding: 0.5rem;"> <h1>Welcome to My Site</h1> </header> <section style="margin: 1rem 0;"> <p>This is the main content inside the default slot.</p> </section> <footer style="background: #eee; padding: 0.5rem; font-size: 0.8rem;"> <small>© 2024 My Site</small> </footer> </div>

⚠️

Common Pitfalls

Common mistakes when using slots in Astro include:

Not using slot="name" in the parent for named slots, causing content to appear in the default slot instead.
Forgetting to include a <slot> tag in the child component, so passed content never shows.
Trying to pass multiple children without wrapping them in a single parent element, which can cause rendering issues.

astro

<!-- Wrong usage: named slot content without slot attribute -->
<Layout>
  <h1>Header content</h1> <!-- This will go to default slot, not header -->
  <p>Main content</p>
</Layout>

<!-- Correct usage: specify slot attribute -->
<Layout>
  <h1 slot="header">Header content</h1>
  <p>Main content</p>
</Layout>

📊

Quick Reference

Remember these tips when using slots in Astro:

Use <slot> for default content placement.
Use name attribute on <slot> and matching slot="name" on children for multiple slots.
Wrap multiple elements passed to a slot in a single parent element.
If no content is passed, the slot renders empty unless fallback content is provided inside the <slot> tag.

✅

Key Takeaways

Use tags in Astro components to define where passed content appears.

Name slots with the name attribute and match with slot="name" in parent content.

Always wrap multiple elements passed to a slot in a single parent element.

Without a slot tag, passed content will not render inside the component.

Slots can have fallback content by placing default HTML inside the tag.