是否可以将事件侦听器绑定到外部脚本的阴影dom中的元素？

Question

我有一个chrome扩展,它将一个阴影dom元素注入页面以保持css分离.但是我需要将onclick绑定到内容脚本中的阴影dom中的一些元素,因为我需要能够通过单击阴影dom中的元素来调用内容脚本中的函数.

我已经尝试在模板元素中的元素和实际的阴影dom元素上使用.bind('click',function(){}),但我似乎无法访问它们.这可能吗？

Answer 1

尝试查询元素的shadowRoot.换句话说,假设你有一个元素<super-ultra-element>,并且在该元素的阴影dom内部是一个带有'马铃薯'类的div,你想要附加一个点击处理程序.

你应该能够通过首先获得元素的shadowRoot来做到这一点:var superUltraRoot = document.querySelector('super-ultra-element').shadowRoot;.

拥有shadowRoot后,您可以查询元素的阴影dom以查找您关注的项目:var potatoDiv = superUltraRoot.querySelector('.potato');.

您现在可以引用您尝试添加单击处理程序的元素,因此这样做应该相当简单: potatoDiv.addEventListener('click', someClickCallback);