How to Use Named Slots in Astro for Flexible Components

In Astro, use <slot name="slotName"> inside a component to define named slots, and pass content to these slots by adding slot="slotName" to the element when using the component. This allows you to insert different content into specific areas of a component.

Syntax

Named slots in Astro let you define placeholders inside a component where you can insert content from the parent. Use <slot name="slotName"> to create a named slot. When using the component, provide content for that slot by adding slot="slotName" to the element you want to insert.

• <slot name="slotName">: Defines a named slot inside the component.
• slot="slotName": Attribute on the content element to assign it to the named slot.

astro

<!-- Inside MyComponent.astro -->
<div>
  <header><slot name="header" /></header>
  <main><slot /></main> <!-- default slot -->
  <footer><slot name="footer" /></footer>
</div>

Example

This example shows a component with named slots for header and footer, plus a default slot for main content. The parent passes different content to each slot.

astro

<!-- MyComponent.astro -->
<div style="border: 2px solid #333; padding: 1rem; max-width: 400px;">
  <header style="background: #eee; padding: 0.5rem;"><slot name="header" /></header>
  <main style="margin: 1rem 0;"><slot /></main>
  <footer style="background: #eee; padding: 0.5rem; font-size: 0.8rem;"><slot name="footer" /></footer>
</div>

---

<!-- Usage in a page or parent component -->
<MyComponent>
  <h1 slot="header">Welcome to Astro</h1>
  <p>This is the main content inside the default slot.</p>
  <small slot="footer">© 2024 Astro</small>
</MyComponent>

Output

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

Common Pitfalls

Common mistakes when using named slots in Astro include:

• Not matching the slot attribute value exactly with the name in the component's <slot>.
• Forgetting to use the slot attribute on the content element, causing it to go to the default slot instead.
• Using multiple elements with the same slot name unintentionally, which will render all inside that slot.

Always double-check slot names and ensure content elements have the correct slot attribute.

astro

<!-- Wrong usage: slot name mismatch -->
<MyComponent>
  <h1 slot="head">Wrong slot name</h1> <!-- 'head' does not match 'header' -->
  <p>This goes to default slot.</p>
</MyComponent>

<!-- Correct usage -->
<MyComponent>
  <h1 slot="header">Correct slot name</h1>
  <p>This goes to default slot.</p>
</MyComponent>

Quick Reference

Tips for using named slots in Astro:

• Use <slot name="name"> to define named slots inside components.
• Pass content with slot="name" attribute on elements when using the component.
• The default slot uses <slot /> without a name and receives content without a slot attribute.
• Multiple elements can share the same slot name and will render together.
• Named slots improve component flexibility and layout control.

Key Takeaways

Define named slots in Astro components with to create placeholders.

Pass content to named slots by adding slot="name" to elements inside the component usage.

The default slot receives content without a slot attribute and uses in the component.

Ensure slot names match exactly between component and usage to avoid content going to the wrong slot.

Named slots help build flexible, reusable components with clear content areas.