How do I bind link handler (utag) for shadow dom content, which loads on a main DOM?

Silver Contributor
Silver Contributor

I have scenario, where the 'utag.js' is loaded on the page.

The link handler code is getting applied to all links on the page, except Shadow DOM components loaded on the page.

How do I bind the link handler for the links loaded on the shadow DOM?

 

 

1 REPLY 1

How do I bind link handler (utag) for shadow dom content, which loads on a main DOM?

Tealium Employee

Hi @veerender_reddy

First question, "what" is adding the link handler onto the DOM for you? 
All of Tealium's JS code for link handling, and for that matter, almost all the vendor code I've seen, doesn't cope with shadow DOMs.

The way I would attach a handler to these would be to:

  1. Make sure they were built in Open mode.
  2. You'll have to get a reference to the Shadow Root, and then use var links = showdowRoot.querySelector("a"); to get a list of links to apply an event listener too.

Adrian

Ask me anything Tealium related or TypeScript/JavaScript, or NodeJS.
Please remember to mark solutions as accepted for future searchers.
Public