ShadowRoot.onslotchange

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Specification
DOM Standard (DOM)
# dom-shadowroot-onslotchange

Browser compatibility

BCD tables only load in the browser

See also