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.
You can view the bubbling routes if you are using the Active CSS DevTools extension.