slotchange 変更イベントは、そのスロットに含まれるノードが変更されると、HTMLSlotElement インスタンス(<slot> 要素) で発生します。

メモ: スロットされたノードの子ノードが変更された場合、slotchange イベントは発生しません。つまり実際のノード自体を変更 (例えば、追加または削除) した場合に限ります。

バブリングか はい
キャンセル可能か いいえ
対象のオブジェクト HTMLSlotElement
インターフェイス Event

次のスニペットは、私たちの slotchange の例から取られています (ライブも参照してください)。

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

ここではすべての <slot> への参照を取得し、テンプレートの2番目のスロットに slotchange イベントリスナーを追加します。この例ではコンテンツが変更されているスロットです。

スロットに挿入された要素が変更されるたびに、どのスロットが変更されたか、スロット内の新しいノードが何であるかを示すレポートがコンソールに記録されます。

継承

slotchange イベントは Event インターフェイスを実装しています。つまりこのインターフェイスで定義されているプロパティとメソッドを利用できます。

仕様

仕様書 ステータス コメント
DOM
"Mutation observers" and slotchange event の定義
現行の標準 初回定義

ブラウザの互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!
Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support (有) 未サポート1 (有)2 3
63 (63)
未サポート (有) (有)
Feature WebView Android Chrome Android Edge Mobile Firefox Android Opera Android Safari iOS
Basic support (有) (有) 未サポート1 (有)2 3
63.0 (63)
(有) (有)

1. Under consideration

2. バージョン59まで (排他的):この機能は dom.webcomponents.enabled 設定 (true に設定する必要があります) と dom.webcomponents.customelements.enabled 設定 (true に設定する必要があります) の後ろにあります。Firefox の設定を変更するには about:config をご覧ください。

3. バージョン59以降:この機能は dom.webcomponents.shadowdom.enabled 設定 (true に設定する必要があります) の後ろにあります。Firefox の設定を変更するには about:config をご覧ください。

ドキュメントのタグと貢献者

このページの貢献者: irenesmith, mdnwebdocs-bot, silverskyvicto
最終更新者: mdnwebdocs-bot,