We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
相关问题:https://riddle.alibaba-inc.com/riddles/e818e445
CSS 样式是正确设置的:
但触发事件时,原生事件对象上的 target 并不是 <canvas> 而是 shadowRoot,目前的逻辑会判定成 outside 从而触发 pointeroutside 事件,导致 pointermove pointerup 等都无法正常触发。
target
<canvas>
shadowRoot
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
The text was updated successfully, but these errors were encountered:
fix: support shadowRoot #1641
424f57a
Fix 1641 (#1642)
10397c1
* fix: support shadowRoot #1641 * chore: commit changeset * chore: remove gui from test cases for now
Release (#1644)
acd120e
* Fix 1641 (#1642) * fix: support shadowRoot #1641 * chore: commit changeset * chore: remove gui from test cases for now * chore(release): bump version (#1643) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
在线例子:https://codesandbox.io/p/sandbox/g-webcomponent-fvylxl?file=%2Findex.ts%3A28%2C32
Sorry, something went wrong.
xiaoiver
No branches or pull requests
相关问题: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 中获取:
另外 SVG 用于拾取的方法默认情况下也无法深入 shadowRoot 内部:
需要递归传入 shadowRoot 代替 document:
https://stackblitz.com/edit/vite-5cmvnt?file=main.js
The text was updated successfully, but these errors were encountered: