shadow-dom事件无法被调用

shadow-dom是什么

shadow-dom 其实是浏览器的一种能力，它允许在浏览器渲染文档（document）的时候向其中的 Dom 结构中插入一棵 DOM 元素子树，但是这棵子树（shadow-dom）并不在主 DOM 树中。

shadow-dom结构

shadow-dom的结构图1-1如下所示

图1-1 shadow-dom结构图

Document：我们的正常文档 document；

shadow-host：对于一个内部有 shadow-dom 的元素而言，它必然需要一个宿主元素， shadow-dom 的宿主元素就是在原React中的标签。

shadow-root：通过createShadowRoot返回的文档片段被称为 shadow-root 。它和它的后代元素，都将对用户隐藏，但是它们是实际存在的，在 chrome 中，我们可以通常审查元素去查看它们的具体 DOM 实现。

contents：就是上述所说的宿主中各子组件的 DOM 的具体实现。

shadow-dom面临的问题

shadow-dom会出现事件触发无法工作的情况，这是因为由React 的合成事件机制导致的，我们知道在 React 中事件并不会直接绑定到具体的 DOM 元素上，而是通过在 document 上绑定的 ReactEventListener 来管理， 当元素被单击或触发其他事件时，事件被 dispatch 到 document 时将由 React 进行处理并触发相应合成事件的执行。当在 shadow-dom 外部捕获时浏览器会对事件进行重定向，也就是说shadow-dom中的事件在外部进行捕获时是用shadow-host元素作为事件源，所以React在处理合成事件时检测不到shadow-dom里的事件。

shadow-dom事件无法被检测的解决方法

为了解决shadow-dom事件无法触发的问题，可以通过在shadow-dom上直接绑定监听器。解决方式链接如下

shadow-dom上添加事件监听