---
# System prepended metadata

title: SideeX Shadow Locator
tags: [English]

---

---
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:

![](https://i.imgur.com/FXXWPLu.png)


Suppose you want to locate the element:
```htmlmixed=
<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.
![](https://i.imgur.com/T7QV5EV.png)

You will get the CSS selectors from the JS path:
```javascript=
document.querySelector("#myheader").shadowRoot.querySelector("#shadow_header").shadowRoot.querySelector("#shadow_header2")
```




