模板有一些不足的地方，主要的不足在于靜態內容不允許開發者像一般的標準 HTML 模板那樣渲染自定義的變量或者數據。

這時候 就派上用場了。

可以把插槽看成是允許開發者在模板中放置自定義 HTML 的占位符的功能。這樣開發者就可以創建能用的 HTML 模板并且通過引入插槽來自定義渲染內容。

讓我們看一下以上模板添加一個插槽的代碼如下：

如果在標記中引用該元素的時候沒有定義插槽內容，或者瀏覽器不支持插槽，則 只會包含默認的 "Default text" 內容。

若想要定義插槽內容，開發者得在 中定義元素 HTML 結構的 slot 屬性值和對應填充的插槽名稱保持一致即可。

如前所述，開發者可以隨便寫插槽內容：

 Let"s have some different text!

所有可以被插入插槽的元素被稱為可插入元素；已插入插槽元素稱為插槽元素。

注意以上示例中插入的 元素即是插槽元素。它擁有一個 slot 屬性，屬性值和模板中插槽定義的 name 屬性值相等。

瀏覽器渲染之后，以上代碼會創建如下扁平 DOM 樹：

  #shadow-root
  

    
      Default text
    
  
  Let"s have some different text!

這里原文有誤，有改動。

注意 #shadow-root 元素只是表示存在 Shadow DOM 而已。

可以在主頁面樣式化含有 shadow DOM 的組件，可以定義組件樣式或者提供 CSS 自定義屬性的形式讓用戶覆蓋掉默認樣式值。

局部樣式 是 Shadow DOM 極好的功能之一：

主頁面上的 CSS 選擇器不會影響到組件內部元素的樣式。

組件內部定義的樣式不會影響頁面上的其它元素樣式。它們只作用于宿主元素。

Shadow DOM 中的 CSS 選擇器只影響組件內部的元素。實際上，這意味著開發者可以重復使用通用的 id/class 名稱而不用擔心和主頁面上的其它樣式發生沖突。簡單的 CSS 選擇器可以提高頁面性能。

讓我們看一下如下 #shadow-root 中定義的一些樣式：

#shadow-root

以上示例中的樣式只會作用于 #shadow-root 內部。

開發者也可以在 #shadow-root 里面使用 元素來引入樣式表，也只作用于 #shadow-root 內部。

:host 偽類允許開發者選擇和樣式化包含 shadow 樹的宿主元素：

只有一個地方需要注意即若主頁面上定義的宿主元素樣式優先級比元素里面定義的 :host 樣式規則要高。這樣就允許開發者從外部覆蓋掉組件內部定義的頂級樣式。

即當在主頁面上定義了如下的樣式：

my-paragraph {
  marbin-bottom: 40px;
}

同理，:host 只在shadow 根的上下文中起作用，因此開發者不能夠在 Shadow DOM 外面使用。

:host() 這樣的功能樣式允許開發者只樣式化匹配 的宿主元素。這是一個絕佳的方式，開發者可以在組件內部封裝響應用戶交互或者狀態的行為，然后基于宿主元素來樣式化內部節點。

:host-context() 偽類找出宿主元素或者宿主元素任意的祖先元素匹配 。

常用于定制化。例如，開發者通過為 或者 添加類來進行定制化：

  
  …
  

或者

  …

當宿主元素的祖先元素包含有 .lightheme 類 :host-context(.lightheme) 將會樣式化 ：

:host-context(.lightheme) {
  color: black;
  background: white;
}

可以使用 :host-context() 來進行定制化主題樣式，但是更好的方法即通過 CSS 自定義屬性來創建樣式鉤子。

開發者可以從外部通過把標簽名作為選擇器來樣式化組件宿主元素，如下：

custom-container {
  color: red;
}

外部樣式比 Shadow DOM 中定義的樣式擁有更高的優先級。

例如，假設用戶書寫如下選擇器：

custom-container {
  width: 500px;
}

將會覆蓋如下組件樣式規則 ：

:host {
  width: 300px;
}

組件自身樣式化只能做到這么多。但如果想要樣式化組件內部屬性呢？這就需要 CSS 自定義屬性。

若組件作者使用 CSS 自定義屬性提供樣式鉤子，用戶可以用來更改內部樣式。

這和 思路類似只是應用到了樣式。

讓我們看如下示例：

…

Shadow DOM 內部：

:host([background]) {
  background: var(--custom-container-bg, #CECECE);
  border-radius: 10px;
  padding: 10px;
}

該示例中，因為用戶提供了該背景顏色值，所以組件將會把黑色作為背景顏色值。否則，默認為 #CECECE。

作為組件作者，需要讓開發者知道可以使用的 CSS 自定義屬性。可以把自定義屬性看作組件的公共接口。

Shadow DOM API 可能用來操作插槽。

當一個插槽的分發元素節點發生變化的時候觸發 slotchange 事件。例如，當用戶從 light DOM 中添加/刪除子節點。

var slot = this.shadowRoot.querySelector("#some_slot");
slot.addEventListener("slotchange", function(e) {
  console.log("Light DOM change");
});

可以在元素的構造函數中創建 MutationObserver 來監聽 light DOM 的其它類型的修改事件。前面文章中有介紹過 MutationObserver 的內部構造及使用指南。

了解哪些元素是和插槽有關是很有用處的。調用 slot.assignedNodes() 可以找出哪些元素是由插槽渲染的。flatten: true} 選項會返回插槽的默認內容(若沒有分發任何節點)。

看一下如下示例：

Default content

假設以上內容包含在一個叫做 的組件內部。

讓我們查看一下該組件的不同用法，然后調用 assignedNodes() 輸出不同的結果：

第一例中，我們將往插槽中添加內容：

   container text 

調用 assignedNodes() 將會返回 [ container text ]。注意結果為一個節點數組。

第二例中，將不添加內容：

調用 assignedNodes() 將會返回空數組 []。

但是，假設添加 {flatten: true} 參數將會返回默認內容：[

Default content

同理，為了查找插槽中的元素，開發者可以調用 assignedNodes() 來找出元素被掛載到哪個組件插槽中。

Shadow DOM 中的事件冒泡的經過是值得注意的。

事件目標被調整為維護 Shadow DOM 的封閉性。當事件被重新定位，看起來是由組件自身產生而不是組件的 Shadow DOM 內部元素。

這里有傳播出 Shadow DOM 的事件列表(還有一些只能在 Shadow DOM 內傳播)：

Focus 事件：blur, focus, focusin, focusout

鼠標事件：click, dblclick, mousedown, mouseenter, mousemove 等.

滾輪事件: wheel

輸入事件: beforeinput, input

鍵盤事件: keydown, keyup

組合事件: compositionstart, compositionupdate, compositionend

拖拽事件: dragstart, drag, dragend, drop 等.

默認情況下，自定義事件不會傳播出 Shadow DOM。開發者若想要分派自定義事件且想要傳播出 Shadow DOM，需要添加 bubbles: true 和 composed: true 選項參數。

讓我們瞧瞧類似這樣的事件分派：

var container = this.shadowRoot.querySelector("#container");
container.dispatchEvent(new Event("containerchanged", {bubbles: true, composed: true}));

可以通過檢查 attachShadow 來檢查是否支持 Shadow DOM 功能：

const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;

參考資料：

https://developer.mozilla.org...

https://developers.google.com...

https://developer.mozilla.org...

https://www.html5rocks.com/en...