react icon indicating copy to clipboard operation
react copied to clipboard

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

Open Jack-Works opened this issue 3 years ago • 0 comments

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 avatar Oct 20 '22 03:10 Jack-Works