Is it possible to bind an event listener to an element within a shadow dom from external script?

Question

I have a chrome extension that injects a shadow dom element to a page to keep the css separate. But I need to bind an onclick to some elements within the shadow dom from a content script because I need to be able to invoke functions in the content script by clicking on the elements that are in the shadow dom.

I have tried using the .bind('click', function(){}) on both the elements in the template element and the actual shadow dom element but I can't seem to access them. Is this possible?

Answer 1

Try querying against the element's shadowRoot. In other words, lets say you have an element <super-ultra-element>, and inside that element's shadow dom is a div with class 'potato' that you wish to attach a click handler to.

You should be able to do this by first obtaining the element's shadowRoot: var superUltraRoot = document.querySelector('super-ultra-element').shadowRoot;.

Once you have the shadowRoot, you can query the element's shadow dom for the item you care about: var potatoDiv = superUltraRoot.querySelector('.potato');.

You now have a reference to the element you're trying to add a click handler to, so doing so should be fairly easy: potatoDiv.addEventListener('click', someClickCallback);