ShadowRoot.onslotchange

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.

Examples

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}".`);
};

Specifications

Browser compatibility

See also

• Using templates and slots
• slotchange event
• HTMLSlotElement
• GlobalEventHandlers.onslotchange