Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<slot>

<slot> は HTML の要素で、ウェブコンポーネント内のプレースホルダーであり、コンポーネントが使用される際に自分自身でマークアップを埋めることができます。 これにより、別個の DOM ツリーを生成し、それらを一緒に表示することが可能になります。

スロットには、プレーンテキスト、その他の HTML 要素、その他のウェブコンポーネントを入れることができます。 また、スロットにはデフォルトのコンテンツを指定することもでき、ウェブコンポーネントが使用された際に、そのスロットに他のコンテンツが割り当てられていない場合、このデフォルトのコンテンツが表示されます。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<slot>
53
79
63
10
53
10
DOM API
assignedSlot

assignedSlot は Element インターフェイスの読み取り専用プロパティで、 HTMLSlotElement を返します。これは、そのノードが挿入された slot 要素を表します。
53
79
63
10
53
10
slot

slot は Element インターフェイスのプロパティで、この要素が挿入されたシャドウ DOM のスロットの名前を返します。
53
79
63
10
53
10
HTMLSlotElement

HTMLSlotElement はシャドウ DOM API のインターフェイスで、 HTML の slot 要素の名前と割り当てられたノードにアクセスできるようにします。
53
79
63
10
53
10
assignedElements

assignedElements() は HTMLSlotElement インターフェイスのメソッドで、このスロットに割り当てられた一連の要素を返します (そしてそれ以外の要素を除きます)。
65
79
66
12.1
65
12.2
assignedNodes

assignedNodes() は HTMLSlotElement インターフェイスのプロパティで、このスロットに割り当てられた一連のノードを返します。
53
79
63
10
53
10
name

name は HTMLSlotElement インターフェイスのプロパティで、スロットの名前を返したり、設定したりします。スロットはウェブコンポーネント内のプレイスホルダーで、ユーザーが独自のマークアップで埋めることができます。
53
79
63
10
53
10
slotchange_event

slotchange イベントは、 HTMLSlotElement インスタンス(slot 要素) において、そのスロットに含まれるノードが変更された場合に発行されます。
53
79
63
10.1
53
10.3
assignedSlot

assignedSlot は Text インターフェイスの読み取り専用プロパティで、要素に関連付けられた HTMLSlotElement オブジェクトを返します。
53
79
63
10
53
10
CSS セレクタ
:slotted

`::スロット付き`
50
79
63
10
50
10
HTML 属性
name
53
79
63
10
53
10
slot

slot はグローバル属性で、シャドウ DOM のシャドウツリー内にあるスロットを、ある要素に割り当てます。 slot 属性をもつ要素には、 slot 要素に name 属性の値を指定することで生成されたスロットの値がその slot 属性の値と一致する生成されたスロットに割り当てられます。
53
79
63
10
53
10
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (10.1)
実装メモ
  • onslotchange`イベントハンドラプロパティはサポートされていません。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (10.3)
実装メモ
  • onslotchange`イベントハンドラプロパティはサポートされていません。

基本構文

HTML 
<!-- Shadow DOM テンプレート内 -->
<template id="card-template">
  <div class="card">
    <slot name="title">デフォルトタイトル</slot>
    <slot>デフォルトコンテンツ</slot>
  </div>
</template>

ライブデモ

スロットの概念

slot 要素は Shadow DOM 内のプレースホルダー。外部コンテンツを挿入可能。

プレビュー全画面表示

名前付きスロット

name 属性で複数のスロットを区別し、特定の位置にコンテンツを配置。

プレビュー全画面表示

デフォルトコンテンツ

slot に挿入がない場合はデフォルトコンテンツが表示される。

プレビュー全画面表示

実務での使いどころ

  • <slot> の活用

    <slot> は HTML の要素で、ウェブコンポーネント内のプレースホルダーであり、コンポーネントが使用される際に自分自身でマークアップを埋めることができます。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク