HTMLSlotElement: assignedNodes() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
assignedNodes() は HTMLSlotElement インターフェイスのプロパティで、このスロットに割り当てられた一連のノードを返します。
flatten オプションが true に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。
構文
js
assignedNodes()
assignedNodes(options)
引数
options省略可-
返されるノードのためのオプションを設定したオブジェクトです。利用可能な値は以下のとおりです。
flatten-
論理値で、利用可能な子の
<slot>要素すべてに割り当てられたノードを返すか (true)、返さないか (false) を示します。既定値はfalseです。
返値
ノードの配列。
例
以下のスニペットは、 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 # dom-slot-assignednodes-dev |
ブラウザーの互換性
Loading…