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.
Also demonstrated is the changing a host element attribute from inside the component, and then the observation reflected in the changing of the h2 tag.
For a simpler example that does the same thing, check out the "Component - events" example. You can also use this simpler method for shadow DOMs if you prefer a less complicated approach.
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.