Svelte slotと名前付きslot

以前にも似たような記事を書いたけど、書き直してみたよ。

Svelteの名前付きslotとは

公式サイトでは、実際に使われている例を提示してくれてます。
一度見てみると感覚はつかみやすいかも（Svelte公式様のこういうのわかりやすい。好き）

Svelteでは、slotタグを使ってコンポーネントに動的なコンテンツを挿入できる。
名前付きslotを使うと、コンポーネント内の特定の場所に特定のコンテンツを挿入できる。

普通のslotをおさらい

ここで普通のslotの概念を簡単におさらいしておきます。

1. コンポーネント内に動的なコンテンツにしたい場所にslotを入れておく
2. コンポーネントを利用する際に、コンテンツを中にいれる<コンポーネント>要素</コンポーネント>

例

コンポーネント定義

例えば、Card.svelteコンポーネントがあるとして

lib/Card.svelte

<div class="card">
    <header>
        ヘッダー
    </header>
    
    <!-- <slot>デフォルト</slot>でデフォルトの要素を指定も可能 -->
    <slot/>
    
    <footer>
        フッター
    </footer>
</div>

コンポーネントの利用

<script>
  import Card from '$lib/Card.svelte';
</script>

<Card>
  ここに挿入されるコンテンツは、Cardコンポーネントの`slot`の部分に表示される
</Card>

実際表示されるときは、こういう順番になるよー

<div class="card">
    <header>
        ヘッダー
    </header>
    
    ここに挿入されるコンテンツは、Cardコンポーネントの`slot`の部分に表示される
    
    <footer>
        フッター
    </footer>
</div>

本題

名前付きslotの基本

名前付きslotを使用するためには、

1. コンポーネント内でslotに名前を付ける
   <slot name=任意の名前>
2. コンポーネントを利用する際に、slotを指定
   要素に<コンポーネント> <要素 slot=名前></コンポーネント>を属性指定して配置

例

コンポーネント定義

先程のCardコンポーネントそれぞれを指定できるようにしていく。

lib/Card.svelte

<div class="card">
  <header>
    <slot name="header">デフォルトのヘッダー</slot>
  </header>
  <div class="content">
    <slot name="content">デフォルトのコンテンツ</slot>
  </div>
  <footer>
    <slot name="footer">デフォルトのフッター</slot>
  </footer>
</div>

上記のコンポーネントには、

• header
• content
• footer

の3つの名前付きslotが設定されている。

普通のslotと同様に、指定されなかった場合は、デフォルトが使われる

コンポーネントの利用

このCardコンポーネントを利用する際に、特定のslotにコンテンツを挿入するには、slot属性を利用します。

<script>
    import Card from '$lib/Card.svelte'
</script>

<Card>
  <div slot="header">カスタムヘッダー</div>
  <div slot="content">カスタムコンテンツ</div>
  <div slot="footer">カスタムフッター</div>
</Card>

こんな感じで細かい制御ができるようになります！！便利

参考リンク

公式ドキュメントはこちら（ドキュメントも日本語化されていて比較的わかりやすい）