[g] shadowRoot 事件监听无效

[xiaoiver]

相关问题：https://riddle.alibaba-inc.com/riddles/e818e445

CSS 样式是正确设置的：

但触发事件时，原生事件对象上的 target 并不是 <canvas> 而是 shadowRoot，目前的逻辑会判定成 outside 从而触发 pointeroutside 事件，导致 pointermove pointerup 等都无法正常触发。

因此需要在 WebComponent 中正确获取 target： https://stackoverflow.com/questions/57963312/get-event-target-inside-a-web-component

如果检测到 shadowRoot，从 composedPath 中获取：

if (target?.shadowRoot) {
  target = nativeEvent.composedPath()[0] as Element;
}

另外 SVG 用于拾取的方法默认情况下也无法深入 shadowRoot 内部：

document.elementsFromPoint(clientX, clientY);

需要递归传入 shadowRoot 代替 document： https://stackblitz.com/edit/vite-5cmvnt?file=main.js

[xiaoiver]

在线例子：https://codesandbox.io/p/sandbox/g-webcomponent-fvylxl?file=%2Findex.ts%3A28%2C32