---
tags: English
---
# SideeX Shadow Locator

## Shadow DOM

Shadow DOM is designed as a tool for building component-based apps. Because the Shadow tree is self-contained, the simple locator (e.g. document.querySelector()) won't return nodes in the component's shadow DOM.

See the [link](https://developers.google.com/web/fundamentals/web-components/shadowdom) for more introduction to Shadow DOM.

## Shadow Locator

To solve the Shadow DOM problem, we propose a new locator called **Shadow Locator**, which is composed by a sequence of css selectors of the following form:

:::info
shadow=\[CSS Selector 1,..., CSS Selector n\]
:::

The last CSS Selector refers to the target element in a shadow tree. The preceding CSS Selectors refer to the shadow hosts.

### An Example

Given a DOM tree as following:


Suppose you want to locate the element:

<h1 id="shadow_header2">This is Header2</h1>

The shadow locator will be
*shadow=\["#myheader","#shadowheader","#shadowheader2"\]*

#### Tips

To quickly know the CSS selectors, you can right click on the target element in Browser DevTools (F12) -> Copy -> Copy JS path.

You will get the CSS selectors from the JS path:

document.querySelector("#myheader").shadowRoot.querySelector("#shadow_header").shadowRoot.querySelector("#shadow_header2")