HTMLSlotElement.name

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

構文

let name = htmlSlotElement.name
htmlSlotElement.name = name

文字列です。

以下のスニペットは、 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 イベントリスナーを追加しています。

スロットに挿入された要素が変更されるたびに、どのスロットが変更され、スロット内の新しいノードが何であるかというレポートをコンソールに記録しています。

仕様書

Specification
HTML Standard
# dom-slot-name-dev

ブラウザーの互換性

BCD tables only load in the browser