cssgoogle-chromeshadow-domdeveloper-tools

How can I inspect the shadow DOM of native controls in Chrome developer tools?

I want to style a native input element, which in Chrome has a shadow root and can be styled with many pseudo-selectors. It is apparently possible to see the shadow root in Developer Tools, and I'm told it looks like this:

range input with shadow root

However, I cannot see this shadow root (in Chrome 118). How do I view the shadow root in developer tools?

Solution

  • In Developer Tools settings with:

    .

    But you can not style #shadow-root (user-agent) shadowDOM
    created by the "Browser" Web Components:

    like you can style #shadow-root (open) or #shadow-root (closed)
    created by "User" Web Components: