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 host var shadowHost = document.querySelector('.shadow-cls'); // 2. 建立影子 shadow root var 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 host var shadowHost = document.querySelector('.shadow-cls'); // 2. 建立影子 shadow root var 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 host var shadowHost = document.querySelector('.shadow-cls'); // 2. 建立影子 shadow root var 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瀏覽器下看下結果如下所示：
注意：上面的demo在chrome瀏覽器下會生效，在firefox或safari是不支援的。因此如果在平時的開發中我們需要引入對應的庫進來才會支援。