HTMLSlotElement.name

name は HTMLSlotElement インターフェイスのプロパティで、スロットの名前を返したり、設定したりします。スロットはウェブコンポーネント内のプレイスホルダーで、ユーザーが独自のマークアップで埋めることができます。

値

文字列です。

例

以下のスニペットは、 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 # dom-slot-name-dev

ブラウザーの互換性

BCD tables only load in the browser