Template scripts are not encapsulated within the shadow root

Follow

Salman Mazhar

• November 24, 2023 12:38

Hi, 
We are witnessing that the scripts defined in the templates execute globally and are not encapsulated to the shadow root of the template. This poses the problem when there are multiple campaigns on page using same template as the css selectors query the whole document and not just the shadow root. 

Is this by design or is this a potential bug. 
Thanks in advance

0

• Official comment

  

  Liva Deksne

  • July 30, 2024 10:59
  • Edited

  Hi Salman,

  You are correct, shadow root encapsulates only HTML and CSS. In order to encapsulate javascript, you need to do your logic only on specific selectors. Let's say you want to query an element on the campaign, therefore you can use DY variable ${dyVariationId} and add it to the element as a class name. This generates a unique ID based on the variation. Then in the Javascript you can specifically query this class name and interact with the element as needed.

  For example,

  HTML:

  <div class="test${dyVariationId}">

  <div>Some text</div>

  </div>

  Javascript:

  const elementNode = document.querySelector('.test${dyvariationId}');

  // interact with the specific element afterward...

   

  Please if any more information is needed for your specific campaign, reach out to your Technical Account Manager.

   

  Regards,

  Liva

  Technical Account Manager Team Lead

  Comment actions Permalink

Please sign in to leave a comment.