プログラミング

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

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

関連記事

MySQL

MySQL に新たにデータベースと専用ユーザを追加するSQLステートメント

目次1. 本ページに記載する SQLステートメントを使用するシチュエーション2. 前提3. SQLステートメント1. データベースの作成2. ユーザーの作成3. このユーザーに、先ほど作成したデータベ …

Milkcocoa のチュートリアルを試す

Milkcocoa のチュートリアルをやってみました。 目次Milkcocoa とは?チュートリアル1. アカウント登録する2. ログインする3. アプリを作成する4. スマートフォン側のWebページ …

WordPress

WordPressのソースコード。HTMLにPHPを埋め込むスタイル。

WordPress本体のPHPソースコードや、テーマに含まれているPHPのソースコードを見ると、やたらと PHPの開始タグ(<?php)と終了タグ(?>)が埋め込まれています。 例えば、こ …

no image

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

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

WordPress

WordPress で処理を追加したい場合、どこにコードを書けばよいのか?

自分で導入した WordPress でブログを運営していたとします。ある日、WordPress の動作を変更したくなって 調べてみると、ほんの少し PHPのコードを書けば済むことが分かりました(アクシ …