Compose child markup with slots

A slot is a place where a component renders markup supplied by its parent. Here is a simple panel:

<!-- Panel.astro -->
<aside class="panel">
  <header><slot name="heading">Details</slot></header>
  <slot />
</aside>

The parent fills both slots:

<Panel>
  <h2 slot="heading">Shipping</h2>
  <p>Orders leave within two working days.</p>
</Panel>

Details is fallback content: Astro uses it only when the parent does not provide the named slot. The unnamed children go into the default <slot />.

Props pass values that the component interprets. Slots pass a piece of markup that the parent controls. Use a prop for variant="warning"; use a slot when callers need links, emphasis, or several elements.

In Astro 7, do not provide several sibling elements separately to the same named slot. Only one sibling assigned to that slot is rendered. Wrap the group in one fragment:

<Fragment slot="heading">
  <span>Shipping</span>
  <small>Updated today</small>
</Fragment>

Layouts use this same mechanism: the layout owns the document shell, while each route supplies its page-specific content.