プログラミング

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

メールアドレスが公開されることはありません。

関連記事

Firebase

Firebase を利用する手順

Firebase を利用する手順について説明しています。

フレームレートを指定して Canvas に描画するサンプルページを作りました

フレームレートを指定して Canvas に描画するサンプルページを作りました。 目次1. スクリーンショット2. デモ3. 説明4. ソースコード 1. スクリーンショット スクリーンショット 2. …

Bootstrap

ボタンを押した直後に BootstrapのTooltipを数秒間表示する方法

ウェブページ上のボタンを押した直後に、Bootstrap の Tooltip を一定時間だけ表示する方法を紹介します。 スポンサードリンク 目次1. はじめに2. 参考になる情報3. プログラムの書き …

Gentelella の Sidebar を解析してみました

目次1. はじめに2. サイドバーの形態3. サイドバーの形態のスタイル定義4. ページを開いた時のデフォルト5. トグルアイコンをクリックした時の動作6. サイドバー内の各メニュー項目をクリックした …

no image

Pug(旧Jade)テンプレートファイル内で、npmでインストールしたモジュールを使う方法

Pug(旧Jade)というJavaScriptのテンプレートエンジンがありますが、このテンプレートファイル内では JavaScriptが使えるので、複雑なHTMLを生成することができます。 但しデフォ …