Click event outside the shadow DOM in web-component returns the "Document" as the event.target

[Tamar Y]

I have a chrome extension, written in pure JS, that its content script detects and listens for every click event on a web pages.

A click event fires when a user clicks on a nested shadow dom inside a web component, However, the target is the entire document. Based on some articles about web components and shadow doms, It appears I can identify clicks via event.composedPath() if shadow dom mode is open.

Shadow DOM mode is open in my case, but the event.path points to the document itself and not the "real" click target.

Also, I tried to add an event listener to the shadow dom element, but the event wan not fired.

Please find attached a screenshot of the web-page (I do not have access to the code, I only detect the website through my chrome extension).

I tried to write something like this ouside the web-component:

```

        document.addEventListener('click', (event) => {

                            console.log(event.target);  // #document

                            console.log(event.composed);  // false

                            console.log(event.composedPath()); // (2) [document, Window]

                        });

```

I tried also to add a listener to the required element itself:

```

       let elements =

                            [...document.querySelectorAll("*")].filter(

                                element => [element.tagName].some(

                                    attr => attr.startsWith("MACROPONENT")

                                )

                            );

                        console.log(elements);

                        for (let element of elements) {

                            console.log(element.shadowRoot?.mode);

                            element.addEventListener('click', (event) => {

                                console.log(event.composed);

                            });

                            element.shadowRoot?.addEventListener("click", (e) = > {

                                console.log(e.target);

                            });

```
But the events are not being fired.

Any help will be appreciated!

[PhistucK]

Without seeing the code of the website/reduced test case, I have not a lot to offer, but you can try to create nested open shadow DOM components yourself on a page (basically a reduced test case) and test. If it happens there as well, share that with the group and someone might have an idea.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/d5f74221-ea27-4409-b4c6-0aaa03352d36n%40chromium.org.