Shadow DOMs enable web apps to create scoped components, to avoid global conflicts and more cleanly handle styles. A shadow DOM is a DOM subtree attached to an element, but separate from the children of that element.

If your application makes use of shadow DOMs then you may also want to select elements within this shadow DOM when leveraging Chameleon.

The good news is that Chameleon's element selector handles shadow DOMs seamlessly, so you can simply point and click at the element inside the shadow DOM to select it.

This may seem natural, but some other tools will not be able to parse the shadow DOM and not be able to select elements within it. Chameleon handles this and excels at handling other new web technologies.

If you'd like to adjust the CSS selectors that are being used to define the element within the shadow DOM then you should do this using the Custom CSS path option.

Chameleon can also handle multiple layers/levels of shadow DOMs; you can separate these within the custom CSS path using , values.