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

<slot>

<slot> は HTML の要素――一連のウェブコンポーネント技術の一部――で、ウェブコンポーネント内で別な DOM ツリーを構築し、一緒に表示することができる独自のマークアップを入れることができるプレイスホルダーです。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<slot>
53
79
63
10
53
10
HTML 属性
name
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.selectors.slotted

`::スロット付き`
50
79
63
10
50
10
html.global_attributes.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. concept

Slot element is Shadow DOM inside. pre-sholda-.partcontent insertpossible.

プレビュー全画面表示

Name withslot

Name attribute in multiple. slot block by, specific. position to content placement.

プレビュー全画面表示

defaultcontent

Slot to insert that case is defaultcontent that display.

プレビュー全画面表示

実務での使いどころ

  • <slot> の活用

    <slot> は HTML の要素――一連のウェブコンポーネント技術の一部――で、ウェブコンポーネント内で別な DOM ツリーを構築し、一緒に表示することができる独自のマークアップを入れることができるプレイスホルダーです。

注意点

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

アクセシビリティ

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

参考リンク