プログラミング

Web Components の Slot について

投稿日:2019年12月17日 更新日:

1. Slot とは?

Web Components では、Shadow DOM を使うことによって「名前空間が分離されたHTML部品(カスタム要素)」を作ることができます。

このカスタム要素は完全に固定された内容にしてもよいのですが、1つのカスタム要素であっても実際に使う際には一部内容を変えられると便利です。

そのための機能が Slot です。Slot という「後から要素(複数可)を挿し込むための口」を用意しておくことで、実際にカスタム要素を使う際に任意の要素を挿し込むことができます。この機構により、1種類のカスタム要素であっても Slot 部分に挿し込む要素を変えることで、異なる内容のHTML部品を生成することが可能となります。

2. Slot の使い方

基本的な使い方

Shadow DOM 側には以下のような感じで、<slot> タグを記述します。name属性にはこのスロットの名前を指定します。

<slot name="element-name">Default Output</slot>

そして、カスタム要素(ここでは <my-element>とします)を記述する際に、先程の <slot> タグの位置に挿し込みたい要素を「そのカスタム要素内」に記述します。それらの要素の slot属性には、上で指定した name属性値(スロットの名前)をセットします。

<my-element>
  <p slot="element-name">任意の内容その1</p>
  <span slot="element-name">任意の内容その2</span>
  <!-- (その他の要素は省略) -->
</my-element>
  • slot属性付きの要素をカスタム要素内のどこに書いても、紐付けられた <slot>要素の位置に挿し込まれます。
  • slot属性に同じ値が指定された複数の要素がある場合は、記述した順番通りに出力されるようです。
  • スロットに該当する要素がない場合は、<slot>要素内の部分がそのまま表示されます(上記の場合は、”Default Output” という文字列)。

こうすることで、<slot>要素があった場所に、<p><span> 要素が置き換えられて表示されます。

名前付き Slot と名前なし Slot の併用

name属性を持たない <slot> 要素を使うこともできます。

例えば、Shadow DOM 側で以下のような 2つの <slot> を書いておくとします(1つは name属性あり、もう1つはなし)。

<slot name="element-name">Default Output</slot>
<slot>Default Output</slot>

一方、カスタム要素では以下のように slot属性で名前を指定した要素と、slot属性 自体を持たない要素を書いておきます。

<my-element>
  <p>任意の内容その1</p>
  <p slot="element-name">任意の内容その2</p>
  <span slot="element-name">任意の内容その3</span>
  <p>任意の内容その4</p>
</my-element>

こうすると、slot="element-name" を指定した要素は <slot name="element-name"> の位置に挿し込まれ、slot属性を指定してない要素は <slot> の位置に挿し込まれます。

この場合であれば、以下のように出力されます。

<!-- <slot name="element-name">のところに挿し込まれる内容 -->
<p slot="element-name">任意の内容その2</p>
<span slot="element-name">任意の内容その3</span>
<!-- <slot>のところに挿し込まれる内容 -->
<p>任意の内容その1</p>
<p>任意の内容その4</p>
  • slot属性あり」「slot属性なし」のそれぞれの内部では、書いた順番が保持されて出力されるようです。

3. ブラウザのサポート状況

以下のサイトを参照してください。

IE と Edge 以外ではだいたい使えるようです(2019年12月時点)。

4. 参考

Web Components

Web Components: 組み込み要素を拡張する方法

2019.12.18
Web Components

Web Components: Shadow DOM に HTML と CSS をセットするいろいろな方法

2019.12.17
Web Components

Web Components の Slot について

2019.12.17

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

web development

Web Development for Beginners を読む:レッスン18, 19, 20

目次1. はじめに2. Part 4: レーザーと衝突検知を追加する(1) 衝突検知のための「オブジェクトの四角形表現を返す関数」を用意する(2) 衝突検知の判定関数を追加する(3) レーザー発射機能 …

web development

Web Development for Beginners を読む:レッスン4と5

目次1. はじめに2. Lesson 4: JavaScript Basics: Data TypesVariables(変数)Constants(定数)Data Types3. Lesson 5: …

Web Storage を使ったサンプルページを作りました

Web Storage を使ったサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

プログラミング

Rubyのように書け、Cのように速いプログラム言語 Crystal の基本的な使い方

Crystal というプログラミング言語の基本的な使い方について紹介します。 実際に「使ってみたい」「試してみたい」といった方に向けて、コードを書き始めるまでの導入方法について書きました。文法の説明な …

React Redux

React と Redux を使ったウェブページのサンプルその1

React と Redux を使ってウェブページのサンプルを作ってみました。以下のURLからアクセスすることがでます。 デモページ 🔗 React + Redux のサンプル002 こ …