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>
要素の名前と割り当てられたノードにアクセスできるようにします。
インスタンスプロパティ
HTMLSlotElement.name
-
文字列で、スロットの名前を取得または設定するために使用します。
インスタンスメソッド
HTMLSlotElement.assign()
-
このスロットに手動で割り当てられたノードを、指定されたノードに設定します。
HTMLSlotElement.assignedNodes()
-
このスロットに割り当てられた一連のノードを返し、
flatten
オプションがtrue
に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。 HTMLSlotElement.assignedElements()
-
このスロットに割り当てられた一連の要素を返します (それ以外のノードは返しません)。
flatten
オプションがtrue
に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられた要素も返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。
イベント
slotchange
-
スロットに含まれるノードが変更されたときに
HTMLSlotElement
インスタンス (<slot>
要素) に発生します。
例
以下のスニペットは、 slotchange の例からとりました (ライブでも確認)。
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