Здравствуйте! В этом уроке мы разберем события теневого DOM. Ведь смысл создания теневого DOM-дерева – это инкапсуляция внутренних деталей компонента.
Допустим, клик произошёл внутри теневого DOM на компоненте <user-card>. Но скрипты основного документа ничего ведь не знают о внутреннем устройстве теневой DOM-структуры, в особенности, если компонент создан сторонней библиотекой.
Поэтому, чтобы не нарушать инкапсуляцию, браузер меняет у этого события целевой элемент.
События, которые произошли в теневом DOM, но пойманы снаружи этого DOM, имеют элемент-хозяин в качестве целевого элемента event.target.