HTMLSlotElement: name プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
name
は HTMLSlotElement
インターフェイスのプロパティで、スロットの名前を返したり、設定したりします。スロットはウェブコンポーネント内のプレイスホルダーで、ユーザーが独自のマークアップで埋めることができます。
値
文字列です。
例
以下のスニペットは、 slotchange の例から取ったものです (ライブでも確認してください).
js
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 # dom-slot-name-dev |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
name |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.