Shadow DOM 外部的事件侦听器不会绑定到 Shadow DOM 内部的元素

Question

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

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

这是一个简单的事件侦听器，用于侦听document：

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

}

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

您可以通过按下和元素h内部和外部的键盘来测试它。inputtextarea

有没有办法让我的脚本从 Shadow DOM Web 组件外部仍然监听keyup事件，但让它监听页面上的所有元素？即使是 Shadow DOM 中的那些。

Answer 1

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

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

然后监听该keyup事件并借助该stopImmediatePropagation()方法停止其传播。

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