HTMLSlotElement: slotchange event - Web APIs | MDN
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("slotchange", (event) => { })
onslotchange = (event) => { }
Event type
A generic Event.
Examples
js
element.setAttribute("slot", slotName);
// element.assignedSlot = $slot
element.removeAttribute("slot");
// element.assignedSlot = null
The following snippet is taken from our slotchange example (see it live also).
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}".`,
);
});
Here we grab references to all the <slot>s, then add a slotchange event listener to the template's second slot — which is the one which has 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 |
|---|
| DOM # eventdef-htmlslotelement-slotchange |
| HTML # handler-onslotchange |
Browser compatibility
See also
HTMLSlotElement