1

How do I create a UA trigger that fires when a user clicks on content in a #shadow-root inserted using JavaScript?

HTML is as follows, where the site I am working on is "site_A" and the site the inserted content is from is "site_B":

<div class="site_A_class">
  <script src="site_B/script.js" ...></script>
</div>

In FF developer view, HTML appears as follows:

<div class="site_A_class">
  <script src="site_B/script.js" ...></script>
  <div>
    #shadow-root
    <div>
      <a class="click_me" href="site_B/url.html">...</a>
    </div>
  </div>
</div>

I want a trigger that fires when a user clicks on a.click_me. Things I have tried: (1) "click - just links" trigger with "click URL contains site_B"; (2) "click - all elements" with "click element matches CSS selector div.site_A_class"; (3) same, but matching ".site_A_class div div a".; (4) "click - just links" trigger with "click class contains click_me". Nothing fires.

Can it be done? If so, I'd appreciate pointers.

2
  • What is the significance of "shadow-root"? Is that just text in the page? – Stephen Ostermiller Feb 21 at 22:55
  • It's the first time I've seen it myself. But I gather from Googling that it is something like a separate document attached to the main document, e.g. at geeksforgeeks.org/what-is-shadow-root-and-how-to-use-it . Would appreciate clarification from someone who knows this material. – Bolio Feb 22 at 12:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.