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