---
# System prepended metadata

title: SideeX Shadow Locator
tags: [Chinese]

---

---
title: SideeX Shadow Locator
tags: Chinese
---
# SideeX Shadow定位器

## Shadow DOM

Shadow DOM是被設計用來發展Component-Based的網頁應用系統，由於Shadow Tree是Self-Contained，因此若使用單純的定位器(例如document.querySelector())將無法取得Shadow DOM中的Node。

可參考[此連結](https://developers.google.com/web/fundamentals/web-components/shadowdom)了解更多關於Shadow DOM的介紹.

## Shadow定位器

為了解決定位Shadow DOM內元素的問題，SideeX提出了一個新的定位器，稱之為**Shadow Locator**。其語法如下，基本上是由一系列的CSS Selector組合而成。

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

最後的CSS Selector指向一個Shadow Tree中的Target元素，在其之前的CSS Selectors指向一層層向上的Shadow Host。

### 範例

給定一個DOM Tree如下:

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


假設您想要定位以下的元素
```htmlmixed=
<h1 id="shadow_header2">This is Header2</h1>
```
可使用如下的Shadow定位器來指向它
*shadow=\["#myheader","#shadowheader","#shadowheader2"\]*


#### 小技巧

為了快速取得此一系列的CSS Selector，您可以在瀏覽器DevTools(瀏覽器上按下F12)中的元素上按右鍵 -> Copy -> Copy JS path。
![](https://i.imgur.com/T7QV5EV.png)

然後你將取得其CSS selectors：
```javascript=
document.querySelector("#myheader").shadowRoot.querySelector("#shadow_header").shadowRoot.querySelector("#shadow_header2")
```




