Event listeners and shadow DOM

For engineers Tracking SDKs
1

Hi,
Does anybody have experience of and perhaps a solution to how to use the event listener-plugins (link clicks, button clicks, forms etc) on a web site using shadow DOMs?

I’m evaluating how to implement Snowplow, custom events vs event listeners, and the websites where I do this have just started to use shadow DOM causing the listeners to stop working.

If you have experience of this and are able to share any findings it would be extremely helpful.

2

This is on my todo list for the v4 release of the tracker (for “open” ShadowRoots at least). v4 switches to using document-level event listeners so we’ll be able to detect this more easily via Event.composedPath() as long as the ShadowRoot isn’t “closed”. Hoping to make a PR for this soon!

If you can’t wait for v4, you’ll probably need to implement this yourself using a similar approach and manual link click tracking.

document.addEventListener('click', (e) => {
    if (e.composed && document !== e.target.getRootNode()) { // click likely generated from shadow root
      var shadowLink = e.composedPath().find((e) => e.nodeName.toUpperCase() === 'A');
      if (shadowLink) { // do any filter checks etc here
        snowplow('trackLinkClick', { /* ... */ });
      }
    }
}, true);
1 Like