ShadowRoot.onslotchange

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

onslotchangeShadowRootイベントハンドラープロパティで、 slotchange イベントを処理します。

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

次のスニペットは、 slotchange の例 を少し修正したもので、 slotchange イベントのリスナーを追加するのではなく、 ShadowRoot.onslotchange プロパティを使用するものです。

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

this.shadowRoot.onslotchange = function(e) {
  const nodes = e.originalTarget.assignedNodes();
  console.log(`Element in Slot "${e.originalTarget.name}" changed to "${nodes[0].outerHTML}".`);
};

仕様書

No specification found

No specification data found for api.ShadowRoot.onslotchange.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性

No compatibility data found for api.ShadowRoot.onslotchange.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

関連情報