Astro JS - Slots

---

---

Astro Slots

The slots in Astro works as named or unnamed placeholder for Astro components. When you create a new component in astro, you can define areas where content should be inserted using the <slot /> element. Now, when you use the component in any other part of your project, you can fill those slots with whatever content you want.

Basic Usage Example

The following section shows a simple example of how to use slots in Astro framework.

Create a Component

In the code below, we have created a simple card component with three slots: header, main, and footer. The slots are defined using the <slot /> element.

<!-- src/components/Card.astro -->

<div class="card">
    <header>
        <slot name="header">Default header content</slot>
    </header>
    <main>
        <slot>Default content goes here</slot>
    </main>
    <footer>
        <slot name="footer">Default footer content</slot>
    </footer>
</div>

Use the Component

Now, we will import and use the component in the index page, then we will fill the slots with custom content.

<!-- src/pages/index.astro -->
---
import Card from '../components/Card.astro';
---

<Card>
  <h2 slot="header">Custom Header</h2>
  
  <p>This content will go in the default/unnamed slot</p>
  
  <p slot="footer">Custom Footer Content</p>
</Card>

Output

In the output, you can see that even though we imported card to index page, all the contents inside card is replaced with contents of slot.

Types of Slots

Astro slots are of two types:

• Named Slots: Named slots are used when you want to insert content into a specific slot. You can define a slot with a name attribute and then fill it with content using the slot attribute.
• Unnamed Slots: Unnamed slots are used when you want to insert content into the default slot. You can define a slot without a name attribute and then fill it with content without using the slot attribute.

Named Slots

The named slots allows only the content with the same name to be inserted into the slot. If you try to insert content with a different name, it will not be displayed. Let's see an example.

---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './Footer.astro';

const { title } = Astro.props;
---
<div id="content-wrapper">
    <Header />
    <!--  children with the `slot="after-header"` attribute  -->
    <slot name="after-header" />
    <Logo />
    <h1>{title}</h1>
    <!--  children without a `slot`, or with `slot="default"` attribute -->
    <slot />
    <Footer />
    <!--  children with the `slot="after-footer"` attribute -->
    <slot name="after-footer" />
</div>

Fallback Content For Slots

When you define a slot in an Astro component, you can also provide fallback content that will be displayed if no content is provided for the slot. This is done by placing the fallback content inside the slot element. When there are no matching children passed to a slot, a <slot /> element will render its own placeholder children.

<!-- src/components/Card.astro -->

---
import Header from './Header.astro';

const { title } = Astro.props;
---
<div id="content-wrapper">
    <Header />
    <h1>{title}</h1>
    <slot>
        <p>
            This is my fallback content, if there is no child 
            passed into slot
        </p>
    </slot>
</div>