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.
In order to trigger a slotchange event, one has to set or remove the slot
attribute.
element.setAttribute('slot', slotName);
element.removeAttribute('slot');
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.