Shadow DOM
Inspect, search and copy selectors inside web components' shadow roots.
Web components keep their insides in a shadow root. Nitpique goes inside open ones, with nothing to turn on:
- Hovering or clicking a component selects the button or text inside it.
- The colour picker sees through it.
- X-Ray outlines what is in it.
- Parent and Child cross the boundary, going up from the top of a root to its host and down from a host into its root.
- The matched rules list the rules from the open shadow root.
- The Document section shows the root between a host and what is inside it, as
#shadow-root (open), and a frame's page as#document, as in DevTools. - Copy as gives a selector and a Playwright locator that reach inside.
Closed shadow roots are entered too: the browser lets an extension see them, so a component cannot hide its insides from Nitpique. The Design tab's type scale, colours, images, canvases, horizontal-scroll check and touch targets read inside them as well.
Questions
Does Nitpique see inside closed shadow roots?
Yes. The browser lets an extension see them, so a component cannot hide its insides from Nitpique.
Can I copy a selector that reaches inside a component?
Yes. Copy as gives a CSS selector joined with >>> and a Playwright locator that reach inside.