HTMLSlotElement

HTMLSlotElement は Shadow DOM API のインターフェイスで、 <slot> 要素の名前とこの要素に割り当てられたノードにアクセスできます。

HTMLSlotElement.name

DOMString: スロットの名前を取得または設定する際に使えます。

HTMLSlotElement.assignedNodes()

このスロットに割り当てられた一連のノードを返し、 flatten オプションが true に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

HTMLSlotElement.assignedElements()

このスロットに割り当てられた一連の要素を返します (それ以外のノードは返しません)。 flatten オプションが true に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられた要素も返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

以下のスニペットは、 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 + '".');
});

ここではすべてのスロットの参照を取得し、テンプレート内の2番目のスロットに slotchange イベントリスナーを追加します。 — これが例の中でコンテンツの変更を追跡します。

スロットの変更の中で要素が挿入されるたびに、コンソールにどのスロットが変更されたか、スロット内の新しいノードは何であるかをログ出力します。