Skip to content
New issue

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

feat(devtools): improve "hover to inspect" and shadow root compat #25518

Conversation

Jack-Works
Copy link
Contributor

@Jack-Works Jack-Works commented Oct 20, 2022

fix #25519

Summary

I made two changes in this PR.

  1. I use event.composed to detect if an event is originated in a ShadowRoot (which the real target is not reflected on event.target, but event.composedPath()[0]).
  2. I use pointermove instead of pointerover to detect the latest hovering element. This change also related to the ShadowRoot,
    in this case, pointerover won't fire correctly (for the devtools use case) in order to select the latest hovering element.
div.root
  shadow-root
    div.a
    div.b

When you hover on div.a, pointerover will fire on div.root because div.a is inside a ShadowRoot, then,
when the hover target changed to div.b, no new pointerover event will be fired because the hover target is still inside the same ShadowRoot.

How did you test this change?

@Jack-Works Jack-Works closed this Jun 10, 2023
@Jack-Works Jack-Works deleted the improve-shadow-root-and-element-capture branch June 10, 2023 08:51
@Jack-Works
Copy link
Contributor Author

fixed by #26888

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: devtools "select an element in the page to inspect it" does not work for ShadowRoot
2 participants