是否可以将事件侦听器绑定到外部脚本的阴影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);

Answer 2

我已经尝试在模板元素中的两个元素上使用.bind（'click'，function（）{}）

1. 向模板添加事件侦听器将不起作用。 您绑定的元素应该是DOM的一部分。

和实际的影子dom元素，但我似乎无法访问它们

2. 我认为jquery还不了解shadow-root。 如果你使用jquery来查询shadow-dom中的元素我不认为它会返回一个节点（应该吗？）

所以，你有两个选择：

1. 正如在其他答案中所建议的那样，您可以通过在shadow-root中查询eventlistener来将eventlistener绑定到实际元素，这可以通过元素上的shadowRoot属性访问。
2. 或者，您可以使用jquery 事件委派将父事件（在本例中为shadow-dom的主机 ）上的事件侦听器与适当的选择器绑定。 当事件将传播到父级时，将触发侦听器。

例如：

$( "#list" ).on( "click", "a", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});