javascript - Shadow DOM 外部的事件监听器不会绑定(bind)到 Shadow DOM 内部的元素

Question

我的网站上安装了一个 Angular 网络组件。它使用 Shadow DOM，因此它非常快(在我的情况下必须如此)。

在我的站点上，我还有一个快捷方式 h，它会打开一个显示一些有用信息的弹出窗口。 h 键绑定(bind)必须保持原样。它是如何实现的示例代码可以在这里看到:https://jsfiddle.net/js1edv37/

这是一个监听document的简单事件监听器:

$(document).on("keyup", function(e) {

}

但是，当我的网络组件聚焦于 textarea 或 input 元素时，这也会被触发。发生这种情况是因为它使用了外部脚本无法访问的 Shadow DOM。

您可以通过在 input 和 textarea 元素内部和外部的键盘上按 h 来测试它。

有没有办法让我的脚本在 Shadow DOM 网络组件之外，仍然监听 keyup 事件，但让它监听 所有 元素页？甚至是 Shadow DOM 中的那些。

Answer 1

在 Web 组件中，通过对 shadowRoot 属性调用 querySelector() 获取输入元素:

let textareainshadow = div.shadowRoot.querySelector( 'textarea' )

然后监听 keyup 事件并在 stopImmediatePropagation() 方法的帮助下停止它的传播。

textareainshadow.addEventListener( 'keyup' , ev => {
    console.log( 'caught', ev.type )
    ev.stopImmediatePropagation()
}) 

https://jsfiddle.net/7mkrxh25/1/