HTMLSlotElement.name
The name
property of the HTMLSlotElement
interface returns or sets the slot name. A slot is a placeholder inside a web component
that users can fill with their own markup.
Syntax
var name = htmlSlotElement.name
htmlSlotElement.name = name
Value
A DOMString
.
Examples
The following snippet is taken from our slotchange example (see it live also).
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 + '".');
});
Here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template â which is the one that keeps having its contents changed in the example.
Every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'name' in that specification. |
Living Standard |
Browser compatibility
BCD tables only load in the browser