The shadow DOM is a way to add HTML structures to the web page so that they remain isolated from the rest of the document object model (DOM). It’s a popular concept with web components, as it allows for encapsulation of web structures so that they aren’t affected by style declarations of the parent tree, for example. However, being such a “hidden” structure, anything that happens in the shadow DOM is also hidden from Google Tag Manager’s listeners.
I’ve written about this before here and here, but this issue remains probably the biggest problem users have when implementing Google Tag Manager. Tip 10: Resolve conflicts with GTM’s listeners The tip title is actually wrong. You’re not fixing Google Tag Manager listeners. Rather, you’re resolving conflicts that other scripts on your page might introduce. GTM’s event listening is based on something called event delegation. Event delegation makes use of the document object model (DOM) and its tree-like hierarchy.