模板有一些不足的地方，主要的不足在于靜態(tài)內(nèi)容不允許開發(fā)者像一般的標(biāo)準(zhǔn) HTML 模板那樣渲染自定義的變量或者數(shù)據(jù)。

這時候 就派上用場了。

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

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

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

若想要定義插槽內(nèi)容，開發(fā)者得在 中定義元素 HTML 結(jié)構(gòu)的 slot 屬性值和對應(yīng)填充的插槽名稱保持一致即可。

如前所述，開發(fā)者可以隨便寫插槽內(nèi)容：

 Let"s have some different text!

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

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

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

  #shadow-root
  

    
      Default text
    
  
  Let"s have some different text!

這里原文有誤，有改動。

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

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

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

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

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

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

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

#shadow-root

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

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

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

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

即當(dāng)在主頁面上定義了如下的樣式：

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

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

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

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

常用于定制化。例如，開發(fā)者通過為 或者 添加類來進(jìn)行定制化：

  
  …
  

或者

  …

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

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

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

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

custom-container {
  color: red;
}

外部樣式比 Shadow DOM 中定義的樣式擁有更高的優(yōu)先級。

例如，假設(shè)用戶書寫如下選擇器：

custom-container {
  width: 500px;
}

將會覆蓋如下組件樣式規(guī)則 ：

:host {
  width: 300px;
}

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

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

這和 思路類似只是應(yīng)用到了樣式。

讓我們看如下示例：

…

Shadow DOM 內(nèi)部：

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

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

作為組件作者，需要讓開發(fā)者知道可以使用的 CSS 自定義屬性?？梢园炎远x屬性看作組件的公共接口。

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

當(dāng)一個插槽的分發(fā)元素節(jié)點(diǎn)發(fā)生變化的時候觸發(fā) slotchange 事件。例如，當(dāng)用戶從 light DOM 中添加/刪除子節(jié)點(diǎn)。

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

可以在元素的構(gòu)造函數(shù)中創(chuàng)建 MutationObserver 來監(jiān)聽 light DOM 的其它類型的修改事件。前面文章中有介紹過 MutationObserver 的內(nèi)部構(gòu)造及使用指南。

了解哪些元素是和插槽有關(guān)是很有用處的。調(diào)用 slot.assignedNodes() 可以找出哪些元素是由插槽渲染的。flatten: true} 選項會返回插槽的默認(rèn)內(nèi)容(若沒有分發(fā)任何節(jié)點(diǎn))。

看一下如下示例：

Default content

假設(shè)以上內(nèi)容包含在一個叫做 的組件內(nèi)部。

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

第一例中，我們將往插槽中添加內(nèi)容：

   container text 

調(diào)用 assignedNodes() 將會返回 [ container text ]。注意結(jié)果為一個節(jié)點(diǎn)數(shù)組。

第二例中，將不添加內(nèi)容：

調(diào)用 assignedNodes() 將會返回空數(shù)組 []。

但是，假設(shè)添加 {flatten: true} 參數(shù)將會返回默認(rèn)內(nèi)容：[

Default content

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

Shadow DOM 中的事件冒泡的經(jīng)過是值得注意的。

事件目標(biāo)被調(diào)整為維護(hù) Shadow DOM 的封閉性。當(dāng)事件被重新定位，看起來是由組件自身產(chǎn)生而不是組件的 Shadow DOM 內(nèi)部元素。

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

Focus 事件：blur, focus, focusin, focusout

鼠標(biāo)事件：click, dblclick, mousedown, mouseenter, mousemove 等.

滾輪事件: wheel

輸入事件: beforeinput, input

鍵盤事件: keydown, keyup

組合事件: compositionstart, compositionupdate, compositionend

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

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

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

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...