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
No specification found
No specification data found for api.ShadowRoot.onslotchange
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
No compatibility data found for api.ShadowRoot.onslotchange
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.