There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
Processing...
This may take a few seconds.

Shadow DOM - events

This example is based on the shadow DOM private variables example, but includes the addition of events, so you can see how to add events to components.

There are also a couple of other things in there, like changing a host element attribute and changing the document h1 title of the page, both from inside the component.

The events you set up are isolated to each component, so they run only on an isolated shadow DOM tree. They are set up with exactly the same syntax as regular events, but because they are written inside the shadow DOM component, they only apply to the component's shadow DOM. The events bubble up the rest of the DOM in exactly the same way as they would natively.

It is a lot simpler to do this sort of thing in Active CSS than in native JavaScript. You get all the benefit of the Active CSS event flow within your component, but the events are totally isolated to your component. See the Components section for more information on components.

You can view the bubbling routes if you are using the Active CSS DevTools extension.

Shadow DOM - events