The onslotchange
property of the ShadowRoot
is an event handler that processes slotchange
events.
The slotchange
event is fired on HTMLSlotElement
instances (<slot>
elements) when the node(s) contained in the slot change.
The following snippet is a slightly modified version of our slotchange example which uses the ShadowRoot.onslotchange
property rather than adding a listener for the slotchange
event.
Every time the element in any slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.
this.shadowRoot.onslotchange = function(e) {
const nodes = e.originalTarget.assignedNodes();
console.log(`Element in Slot "${e.originalTarget.name}" changed to "${nodes[0].outerHTML}".`);
};