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，而外部脚本无法访问。

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

有没有办法让 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()
}) 

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

Answer 2

如果您保存对影子根目录的引用，您可以随时访问它的子节点作为对它们的搜索

$(document).on("keyup", function(e) {
    let focusedInputs = $("input:focus, textarea:focus").length + $(shadow).children("input:focus, textarea:focus").length;

    if (focusedInputs > 0) {
        return true;
    }

    if (e.keyCode === 72) {
        trigger();
    }
});

function trigger() {
    alert("If this was triggered, everything is perfectly fine");
}

let div = document.querySelector("div");
let shadow = div.createShadowRoot();
shadow.innerHTML = "<textarea>This shouldn't fail</textarea>";

textarea {
    width: 500px;
    height: 100px;
}

input {
    width: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>Some stuff here</textarea>
<br />
<input type="text" value="Some more text here" />

<br />
<br />

<h1>Shadow DOM element WON'T fail now :)</h1>

<div></div>

Fiddle