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


假設您想要定位以下的元素

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

可使用如下的Shadow定位器來指向它
*shadow=\["#myheader","#shadowheader","#shadowheader2"\]*

#### 小技巧

為了快速取得此一系列的CSS Selector，您可以在瀏覽器DevTools(瀏覽器上按下F12)中的元素上按右鍵 -> Copy -> Copy JS path。

然後你將取得其CSS selectors：

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