理解Shadow DOM

1. 什么是Shadow DOM?

Shadow DOM 如果按照英文翻譯的話可以理解為影子DOM, 何為影子DOM呢？可以理解為一般情況下使用肉眼看不到的DOM結構，那如果一般情況下看不到的話，那也就是說我們無法直接控制操縱的DOM結構。
Shadow DOM 它是HTML的一個規范，它允許在文檔(document)渲染時插入一顆DOM元素子樹，但是這個子樹不在主DOM樹中。
它允許瀏覽器開發者封裝自己的HTML標簽、css樣式和特定的javascript代碼、同時開發人員也可以創建類似 <input>、<video>、<audio>等、這樣的自定義的一級標簽。創建這些標簽內容相關的API，可以被叫做 Web Component。

如上基本解釋，讓我們很難理解，因此我們可以先看下如下一個 input標簽的demo吧。

html代碼如下：

復制代碼

<!DOCTYPE html>
<html><head><title>Shadow DOM</title><style>#app {margin: 100px;}input::-webkit-input-placeholder {color: red;}</style></head><body><div id="app"><input type="number" placeholder="請輸入內容" /></div></body>
</html>

復制代碼

然后我們在瀏覽器查看如下所示：

如上代碼可以看到，我們使用 input::-webkit-input-placeholder{color: red;} 偽類后，input中的placeholder字體顏色發生改變了，但是我們的input元素的結構并沒有看到偽類相關的html結構。

為了能看到基本結構，我們只需要在chrome瀏覽器中，打開開發者工具，點擊右上角的 "Settings"按鈕，勾選 "Show use agent shadow DOM". 后如下圖所示：

然后我們再來看下input元素的基本代碼結構如下看到：

如上截圖所示，我們可以看到 "請輸入內容" 中的div元素上有一個屬性為 pseudo="-webkit-input-placeholder", 因此我們使用 input元素的偽類 input::-webkit-input-placeholder{} 這樣就可以控制元素的樣式了。

2. ShadowDOM 存在的意義？

首先我們來看下Shadow-dom 基本的結構如下：

Document:?是document文檔對象。
shadow-host:?Shadow DOM的容器元素，即：它是Shadow DOM的一個宿主元素。比如：<input />、<audio>、<video> 標簽；就是shadow-dom的宿主元素。
shadow-root:?Shadow DOM的根節點。通過createShadowRoot返回的文檔片段被稱為 shadow-root, 它和它的后代元素，都會對用戶隱藏。但是它會在瀏覽器中被渲染的，也就是說它是存在的,但是一般情況下在瀏覽器中是不顯示出來的。在chrome瀏覽器中，如上我們可以看到的。
contents:?Shadow DOM包含的子節點樹結構。它包含 <input />、<audio>、<video>等標簽中各子組件的DOM的具體實現。

那么ShadowDOM存在的意義是？

我們都知道像React或Vue這樣的都有組件的概念，比如element-ui等這樣的vue組件。但是我們常用的input、audio、video、等這些元素，其實它也是以組件的形式存在的，即：HTML Web Component. 即這些都有 Shadow DOM。

因此我們可以認為像 input, audio, video等這些元素也是以組件的形式存在的。那么這些組件內部是由一些HTML標簽組成的。
這些元素組成了DOM樹的子樹。但是當我們使用input，audio,或video等這些元素組件的時候，都會知道該子樹的結構，當我們訪問網頁DOM結構的時候，這些子樹都會暴露出來，當我們使用css樣式去改變DOM的樣式的時候，如果DOM的類名和該子樹的類名相同的話，會和子樹的樣式產生沖突，并且我們使用控件的時候，我們并不關心控件的內部結構，只關心控件本身，因此我們需要將控件的內部信息封裝起來。因此 W3C提出了 ShadowDOM的概念，ShadowDOM可以使一些DOM節點在特定范圍內可見，在網頁中是不可見的。但是在頁面渲染的時候也會渲染該ShadowDOM。
也可以看這篇文章介紹

ShadowDOM在各個瀏覽器的支持程度呢？

查看Can I Use(https://caniuse.com/#search=shadowDOM）可以看到它在瀏覽器下的支持程度，如下所示：

3. 如何控制 shadow-dom?

既然W3C提出了ShadowDOM的概念，并且在網頁中一般是不可見的，那么我們是否可以控制該 shadow-dom呢？
下面我們以 <video>標簽來講解吧，比如如下HTML代碼：

復制代碼

<!DOCTYPE html>
<html><head><title>Shadow DOM</title><style>#app {margin: 100px;}</style></head><body><div id="app"><video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls">your browser does not support the video tag</video></div></body>
</html>

復制代碼

3.1 使用偽類來控制 shadow-dom的樣式。

首先看如上代碼顯示的效果圖如下：

在chrome瀏覽器下，我們查看 shadow-dom 結構，可以看到每個元素都加上了一個pesudo 這樣的屬性。我們可以通過這些屬性使用偽類來控制他們的樣式。如下圖所示：

基本樣式如下：

video::-webkit-media-controls-play-button {background-color: red;
}

我們給播放按鈕添加了一個背景顏色為紅色。

注意：很遺憾的是，只有chrome瀏覽器下支持，其他瀏覽器下并不支持，雖然大部分瀏覽器下支持shadow-dom。

4. 使用javascript如何來創建Shadow DOM

4.1 使用 createShadowRoot()來創建Shadow DOM。

如下基本代碼：

復制代碼

<!DOCTYPE html>
<html><head><title>Shadow DOM</title><style>#app {margin: 100px;}.shadow-child {color: red;}</style></head><body><div id="app"><div class="shadow-cls">hello, kongzhi</div></div><script type="text/javascript">// 1. 獲取影子宿主 shadow hostvar shadowHost = document.querySelector('.shadow-cls');// 2. 創建影子 shadow rootvar shadowRoot = shadowHost.createShadowRoot();// 3. shadow root 作為影子樹的第一個節點，其他的節點，比如如下的p節點都是它的子節點。shadowRoot.innerHTML = '<p class="shadow-child">我是子節點</p>';</script></body>
</html>

復制代碼

然后我們查看效果如下：

如上我們可以看到，給影子樹子節點設置css樣式，但是并沒有生效，那是因為影子宿主(shadow host)和影子根(shadow root)之間存在影子邊界。影子邊界保證DOM編寫的css和javascript代碼都不會影響到ShadowDOM.當然反之也是一樣，互不影響。

4.2 理解<content> 和 <template> 的用法。

<content>標簽可以把來自DOM文檔的內容添加到shadow DOM的內容被叫做分布節點。

<content>有一個select屬性來告訴<content>標簽要插入的內容，select屬性值是一個使用CSS選擇器來獲取想要的內容。
選擇器包括類選擇器、元素選擇器等。

比如如下代碼：

復制代碼

<!DOCTYPE html>
<html><head><title>Shadow DOM</title><style>#app {margin: 100px;}</style></head><body><div id="app"><div class="shadow-cls"><em class="shadowhost-content1">我是空智</em><em class="shadowhost-content2">我是龍恩</em></div><!-- 下面是一個模板 template --><template class="template"><div><h1>哈哈，</h1><content select=".shadowhost-content1"></content>我來了<content select=".shadowhost-content2"></content>!</div></template></div><script type="text/javascript">// 1. 獲取影子宿主 shadow hostvar shadowHost = document.querySelector('.shadow-cls');// 2. 創建影子 shadow rootvar shadowRoot = shadowHost.createShadowRoot();// 3. 獲取模板元素var template = document.querySelector('.template');/*4. template.content 會返回一個文檔片段。5. 使用 document.importNode獲取節點，true參數表示深度克隆*/shadowRoot.appendChild(document.importNode(template.content, true));</script></body>
</html>

復制代碼

執行結果如下：

我們也可以通過如下打印：

console.log(template.innerHTML);   // 獲取完整的HTML片段
console.log(template.content);  // 返回一個文檔片段#document-fragment
console.log(template.childNodes);  // 返回[]，說明childNodes無效

這些的信息的區別，如下所示：

4.3 shadowDOM樣式

1. 宿主樣式：
在shadow DOM中利用 :host定義宿主的樣式。:host 是偽類選擇器，給所有的宿主添加樣式可以如下代碼：:host 或 :host(*); 如果想給單獨的宿主添加樣式可以 :host(xx); 其中xx是宿主的標簽或類選擇器等。并且:host還可以配合 :hover、:active等狀態來設置樣式，如下代碼：

復制代碼

/* 定義宿主樣式 :host */
:host {color: red;
}
/* 定義宿主hover狀態下的樣式 */
:host(:hover) {color: black;
}

復制代碼

2. ::shadow

影子邊界為了保證DOM編寫的css或javascript不影響到shadowDOM。如果我們想讓 shadowDOM添加一些樣式，可以使用 ::shadow這樣的。

3. /deep/

::shadow選擇器有一個缺陷是它只能穿透一層影子邊界，如果我們在一個影子樹中嵌套了多個影子樹的話，那么我們需要使用/deep/ 這樣的來編寫css樣式。

4. ::content

我們通過 <content> 標簽把主文檔中的元素添加到shadowDOM的內容被叫做分布節點。分布節點的樣式渲染需要用到::content。比如我們想給節點為em標簽的話，我們直接寫 em {} 這樣的是不會生效的，我們要寫成?::content > em {}. 比如如下代碼：

/* 分布節點的樣式渲染需要用到 ::content */
::content > em {color: blue;background: red;
}

下面我們再來看一下如下demo。

復制代碼

<!DOCTYPE html>
<html><head><title>Shadow DOM</title><style>#app {margin: 100px;}</style></head><body><div id="app"><div class="shadow-cls"><em class="shadowhost-content1">我是空智</em><em class="shadowhost-content2">我是龍恩</em></div><!-- 下面是一個模板 template --><template class="template"><style>/* 定義宿主樣式 :host */:host {color: red;}/* 定義宿主hover狀態下的樣式 */:host(:hover) {color: black;}/* 分布節點的樣式渲染需要用到 ::content */::content > em {color: blue;background: red;}</style><div><h1>哈哈，</h1><content select=".shadowhost-content1"></content>我來了<content select=".shadowhost-content2"></content>!</div></template></div><script type="text/javascript">// 1. 獲取影子宿主 shadow hostvar shadowHost = document.querySelector('.shadow-cls');// 2. 創建影子 shadow rootvar shadowRoot = shadowHost.createShadowRoot();// var shadowRoot = shadowHost.attachShadow({mode: 'open'});// 3. 獲取模板元素var template = document.querySelector('.template');/*4. template.content 會返回一個文檔片段。5. 使用 document.importNode獲取節點，true參數表示深度克隆*/shadowRoot.appendChild(document.importNode(template.content, true));</script></body>
</html>

復制代碼

然后我們再在chrome瀏覽器下看下結果如下所示：