[Svelte] Slot

Slot allows components to have sub-elements.

Simple Example

Slot feature can be used via slot tag.

<!-- components/Slot.svelte -->
<button>
  <slot>Fallback Content</slot>
</button>

slot tag gets the content from the parent.

If there is not any content from a parent, the fallback content is used.

<script lang="ts">
  import Slot from '../components/Slot.svelte';
</script>

<Slot />
<Slot>Test</Slot>

A parent component can pass the sub-elements to a child component.

Named Slot

We can give a name to slot for identification.

<!-- components/NamedSlot.svelte -->
<div>
  <slot name="name">Name</slot>
  <slot name="age">Age</slot>
</div>

The order is important.

It displays in the order specified here.

<script lang="ts">
  import NamedSlot from '../components/NamedSlot.svelte';
</script>

<NamedSlot />

<NamedSlot>
  <span slot="name">HoYa</span>
</NamedSlot>

<NamedSlot>
  <span slot="age">18</span>
</NamedSlot>

<NamedSlot>
  <span slot="age">18</span>
  <strong slot="name">HoYa</strong>
</NamedSlot>

You can put the corresponding name into slot.

props of Slot

Slot can pass values back to the parent using props.

<!-- components/SlotKey.svelte -->
<div>
  <slot name="email" domain="@gmail.com" />
</div>

Any information desired to expose can be specified in the slot in the form of key={value}.

<script lang="ts">
  import SlotKey from '../components/SlotKey.svelte';
</script>

<SlotKey>
  <span slot="email" let:domain>test{domain}</span>
</SlotKey>

The parent exposes the values to the slot template using the let: directive.

We can use the values via interpolation.

Slot Forwarding

Slot can be forwarded.

In this example, I will make an index.svelte first.

<script lang="ts">
  import ParentSlot from '../components/ParentSlot.svelte';
</script>

<ParentSlot>
  <h1>Parent Slot</h1>
  <div slot="parent">Slot Forwarding</div>
</ParentSlot>

Let's forward these sub-elements to a child component through a parent component.

<!-- components/ParentSlot.svelte -->
<script lang="ts">
  import ChildSlot from './ChildSlot.svelte';
</script>

<ChildSlot>
  <slot />
  <slot name="parent" slot="child" />
</ChildSlot>

The parent component just passes data to the child component.

<!-- components/ChildSlot.svelte -->
<slot />
<slot name="child" />

The child component displays the received data.

$$slot

Svelte provides a function to check the presence or absence of a slot that has passed over.

<!-- components/SlotsObject.svelte -->
<div>
  {#if $$slots.name}
    <div class="item">
      <slot name="name" />
    </div>
  {/if}
  {#if $$slots.age}
    <div class="item">
      <slot name="age" />
    </div>
  {/if}
  {#if $$slots.email}
    <div class="item">
      <slot name="email" />
    </div>
  {/if}
  {#if $$slots.default}
    <div class="item">
      <slot />
    </div>
  {/if}
</div>

<style>
  .item {
    box-sizing: border-box;
    border: 1px solid silver;
  }
</style>

$$slots object contains the existence of the slots as boolean form.

Named slot is appeared by its name and no-named slot is appeared by default name.

You can check it through console.log

<script lang="ts">
  import SlotsObject from '../components/SlotsObject.svelte';
</script>

<SlotsObject>
  <h1 slot="name">HoYa</h1>
  <h2 slot="age">18</h2>
  <h3 slot="email">test@example.com</h3>
  <div>test</div>
</SlotsObject>

Test this by removing some slots.