Expose the Shadow DOM of native elements that have one in Dev Tools

Won’t fix Issue #10618770


Ana T.
Jan 22, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

For example, when I inspect a range element in Chrome’s dev tools, I can see its track and thumb, each clearly marked (see attachment). I can inspect them, check their individual styles.

In Firefox, the track, progress (fill) and thumb are not clearly marked, they’re just 3 divs inside the range input (see attachment), but at least I can select and inspect each one of them, check their individual styles, figure out which is which.

In Edge, I don’t even have that. I can only inspect the range element itself, but I cannot see anything inside it, inspect its components (track, thumb, fills). Being able to do that would be immensely helpful in understanding what’s happening with them better and coming up with a way of styling such that I have a consistent cross-browser appearance.


Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Jacob R.”

    Changed Status to “Confirmed”

    Changed Status from “Confirmed” to “Won’t fix”

  • This is a great request. But right now our intrinsic controls are built with true Shadow DOM since EdgeHTML doesn’t support Shadow DOM yet. But when we do, this would make sense to come back to and figure out. So I’m resolving this for now, but tagging this under our Shadow DOM backlog to come back to when we implement that.

You need to sign in to your Microsoft account to add a comment.

Sign in