HTMLSlotElement

Shadow DOM API の一つである HTMLSlotElement インターフェースは、<slot> 要素の名前とこの要素にアサインされたノードにアクセスします。

プロパティ

HTMLSlotElement.name

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

メソッド

HTMLSlotElement.assignedNodes()

この slot にアサインされた要素の列返します。アサインされているノードがない場合、fallback コンテンツを返します。

例

以下のコードは slotchange example (実行例) から持ってきています。

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つ目の slot に slotchange イベントを待つイベントリスナーを追加しています。

slot に挿入された要素が変わるたびに、変更された slot の名前と新しい中身のレポートをコンソールに出力します。

仕様

ブラウザ実装状況