Slots

Default Slot#

Pass content between the opening and closing component tags:

<Card title="{{ title }}">  <p>{{ excerpt }}</p></Card>

Inside the partial, print the content with {{ slot }}:

<article>  <h2>{{ title }}</h2>  {{ slot }}</article>

{{ slot }} is a value tag. It does not use a closing tag.

Named Slots#

Use named slots when a partial needs more than one content area:

<Card title="{{ title }}">  {{ slot.media }}    <img src="{{ image.url }}" alt="{{ image.alt }}">  {{ /slot.media }}  <p>{{ excerpt }}</p></Card>

Inside the partial, print the named slot with the same name:

<article>  {{ slot.media }}  <div>{{ slot }}</div></article>

In the caller, named slots are paired tags. In the partial, {{ slot.media }} prints once.