HTMLSlotElement: slotchange event
The slotchange
event is fired on an HTMLSlotElement
instance (<slot>
element) when the node(s) contained in that slot change.
Note: the slotchange
event doesn't fire if the children of a slotted node change — only if you change (e.g. add or delete) the actual nodes themselves.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | Event |
Event handler property | None |
In order to trigger a slotchange event, one has to set or remove the slot
attribute.
Examples
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).
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 <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 |
---|
HTML Standard # event-slotchange |
Browser compatibility
BCD tables only load in the browser