引言
Shadow-dom 遊離在 DOM 樹之外的節點樹，但是他的建立基於普通 DOM 元素（非 document），並且建立後的 Shadow-dom 節點可以從介面上直觀的看到。更重要的是，Shadow-dom 具有良好的密封性。換而言之，它具有某種意義上的介面能力，是瀏覽器提供了一種封裝功能。典型場景，即使用video標籤，在src屬性填寫影片地址，即可播放影片
目的
- 讓瀏覽器開發者有意隱藏DOM結構
- Shadow DOM 為Web元件中的 DOM和 CSS提供了封裝
定義
- shaw-dom瀏覽器的一種能力
- 允許瀏覽器渲染文件時向其中的Dom結構中插入一棵DOM元素子樹
- 但這棵子樹並不在主DOM樹中
概念
document 正常文件 shadow-host 對於一個內部有 shadow-dom 的元素而言，它必然需要一個宿主元素shadow-root 透過 createShadowRoot 返回的文件片段被稱為 shadow-root contents 各子元件的 DOM 的具體實現
規則
Shadow DOM 必須附加在一個元素上- 可以是HTML檔案中的一個元素，也可以是指令碼中建立的元素
- 以是原生的元素，如
<div>、<p>；也可以是自定義元素如 <my-element>
後記
vue，react 中的web元件與自定義元件，可以用介面標籤的形式注入Dom文件源於此
本作品採用《CC 協議》，轉載必須註明作者和本文連結