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.

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 Standard
# htmlslotelement

ブラウザーの互換性

BCD tables only load in the browser