> For the complete documentation index, see [llms.txt](https://docs.does.qa/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.does.qa/elements/selector-types/shadow-dom.md).

# Shadow DOM

Some controls live inside a **Shadow DOM**: a nested DOM tree that the page keeps separate from the main document. Ordinary CSS Selectors stay outside that tree, so DoesQA cannot find the control until the Selector is told to look inside.

Use this when you can see the control in the browser, but a Manual [CSS](/elements/selector-types/css.md) Selector for the same tag or class finds nothing during a Run.

## Prefix the CSS Selector with `>>>`

For a Manual Element with **Type** set to **CSS**, put `>>>` at the start of the Selector. That tells DoesQA to pierce into Shadow DOM, then match the rest of the CSS as usual.

| Without Shadow DOM    | With Shadow DOM          |
| --------------------- | ------------------------ |
| `h1.main-title`       | `>>>h1.main-title`       |
| `button.submit`       | `>>>button.submit`       |
| `input[name="email"]` | `>>>input[name="email"]` |

Keep the part after `>>>` as tight as any other durable CSS Selector: prefer a stable class, attribute, or structure, not a large layout wrapper. See [Choose durable selectors](/better-coverage/choose-durable-selectors.md).

## Set it on a Manual Element

{% stepper %}
{% step %}

## Open the Element

Open the Element from **Assets → Elements**, or edit it from the Test Step that uses it.
{% endstep %}

{% step %}

## Use Manual CSS

Set **Element configuration** to **Manual**, then set **Type** to **CSS**.
{% endstep %}

{% step %}

## Add the `>>>` prefix

In **Selector**, start with `>>>`, then the CSS that identifies the control inside the Shadow DOM. Save the Element, then run the Flow again.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Pro tip:** Confirm the control is inside Shadow DOM in the browser developer tools before you change the Selector. Expand the host element until you see `#shadow-root`, then copy a tight CSS path from inside that tree and prefix it with `>>>`.
{% endhint %}

## Related

* [CSS](/elements/selector-types/css.md)
* [Selector Types](/elements/selector-types.md)
* [Creating Elements](/elements/creating-elements.md)
* [Choose durable selectors](/better-coverage/choose-durable-selectors.md)