What Is Shadow Root

What is shadow root

This is a special indicator that a Shadow DOM exists. These have existed for years, but developers have never been given APIs into it until recently. Chrome has had this functionality for a while, other browsers are still catching up. It can be toggled in the DevTools Settings under the "Elements" section. Uncheck the "Show User Agent Shadow DOM". This will at least hide away any Shadow DOMs created internally (like select elements.) I am unsure right away if it affects user-created ones, such as custom elements.

These come up in things like iframes as well, where you have a separate DOM tree nested inside of another.

The Shadow DOM is simply saying that some part of the page, has its own DOM within it. Styles and scripting can be scoped within that element so what runs in it only executes in that boundary.

This is one of the primary pieces needed for Web Components to work. Which is a new technology allowing developers to build their own encapsulated components that developers can use just like any other HTML element.

What is DOMElement.shadowRoot?

It's a container for the "internal DOM" (i.e. the shadow DOM) of native elements such as <input> or <button> (or custom elements made with the web components APIs).

When you inspect <input> you only see the <input> itself:

But you can turn on a flag in the Chrome Dev Tools to enable the visibility of the shadow DOM:

You can now see how the <input> is "implemented" by the browser. For example the placeholder is contained within a <div> element:

Why is #shadow-root in my document and why is it overriding my CSS

A lot of chrome plugins automatically create this shadow root in your inspector. For example, ever since I downloaded Vimium, I've had a shadowroot div at the bottom of any page I've opened in chrome. It's nothing to worry about.

Adding CSS to shadow-root element wont work

To make your styles work in a Shadow DOM, you should use :host([selector]):

:host(.test ) {
    border: 1px solid red;
}

The :host selector allows to select the shadow host (the element containing the shadow tree). As a general rule, local styles work only inside the shadow tree, and document styles work outside of it. But there are few exceptions. A shadow host is a DOM node that contains a shadow root. It is a regular element node within the parent page that hosts the scoped shadow subtree. Any child nodes that reside under the shadow host are still selectable, with the exception of the shadow root.

Cypress shadow-root inside of shadow-root

If you're using Cypress v10, then the configuration is in the file cypress.config.js and the format for setting global shadow enabling is

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    ...
  },
  ...
  includeShadowDom: true
})

Or use test-specific configuration

it('tests some shadow dom elements', {includeShadowDom: true}, () => {
  ...
})

---

Related Topics