HTMLSlotElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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

EventTarget Node Element HTMLElement HTMLSlotElement

インスタンスプロパティ

HTMLSlotElement.name

文字列で、スロットの名前を取得または設定するために使用します。

インスタンスメソッド

HTMLSlotElement.assign()

このスロットに手動で割り当てられたノードを、指定されたノードに設定します。

HTMLSlotElement.assignedNodes()

このスロットに割り当てられた一連のノードを返し、flatten オプションが true に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

HTMLSlotElement.assignedElements()

このスロットに割り当てられた一連の要素を返します (それ以外のノードは返しません)。flatten オプションが true に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられた要素も返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

イベント

slotchange

スロットに含まれるノードが変更されたときに HTMLSlotElement インスタンス (<slot> 要素) に発生します。

以下のスニペットは、 slotchange の例からとりました (ライブでも確認)。

js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});

ここではすべてのスロットの参照を取得し、テンプレート内の 2 番目のスロットに slotchange イベントリスナーを追加します。 — これが例の中でコンテンツの変更を追跡します。

スロットの変更の中で要素が挿入されるたびに、コンソールにどのスロットが変更されたか、スロット内の新しいノードは何であるかをログ出力します。

仕様書

Specification
HTML
# htmlslotelement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLSlotElement
assign
assignedElements
assignedNodes
name
slotchange event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.