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