The idea behind the shadow tree is to encapsulate internal implementation details of a component. This requires exposing events explicitly if you still want to interact with the inner parts of a component.
Let’s say a click event happens inside a Shadow DOM of the <user-card> component . But scripts in the main document have no idea about the Shadow DOM internals. So, to keep the details encapsulated, the browser has to retarget the event. Events that happen in the Shadow DOM have the host element as the target when ...
