Shadow DOM 是網路元件（Web Component）標準中的其中一項重要技術，主要目的是為了實現網頁組件的封裝性。

以下是關於 Shadow DOM 的簡單介紹：
核心概念與目的
1. 什麼是 Shadow DOM？
    ◦ Shadow DOM 允許您將一個獨立的 DOM 樹（文件物件模型樹） 附加到常規 DOM 樹中的某個元素上。
    ◦ 它是三個 Web Components 標準之一，其他兩個是 HTML Templates 和 Custom Elements
。
2. 封裝性（Encapsulation）：
    ◦ Web 組件的一個關鍵屬性是封裝

。Shadow DOM 使得該樹的內部對於在頁面中運行的 JavaScript 和 CSS 是隱藏的。

    ◦ 它可以將組件的標記結構、樣式和行為隱藏起來，並與頁面上的其他程式碼隔離

。這意味著它不會干擾頁面上其他程式碼，也不會受到頁面上其他程式碼的影響。

    ◦ 傳統上，在網頁前端開發時，HTML ID 或 Class 名稱可能發生衝突，導致樣式選擇器（style selectors）失去控制，而 Shadow DOM 則提供了解決方案。
 

Shadow DOM 的特性

Shadow DOM 提供了幾項關鍵特性，用來解決 Web 開發中的常見問題：
• 獨立的 DOM (Isolated DOM)： Shadow DOM 可以被視為「DOM 中的 DOM」

。它擁有自己獨立的 DOM 樹、HTML 元素、CSS 樣式和特定的 JavaScript 程式碼，與原始的 DOM 隔離且互不影響。

• 範圍式 CSS (Scoped CSS)： 在 Shadow DOM 中定義的 CSS 作用範圍僅限於該 Shadow DOM 內部

。因此，您可以使用簡單的 CSS 選擇器，而不用擔心 ID 或 Class 名稱的命名衝突。外部頁面的 CSS 不會影響 Shadow DOM 內的節點。

• 生產力 (Productivity)： 開發人員可以專注於自己的 Shadow DOM 功能，不用再考慮對整個頁面的影響性。
• 瀏覽器內建應用： 許多常見的 HTML 元素，如 <input type="range">（拖曳滑軸）、<input type="date">（日期選單）、<audio>、<video> 和 <iframe> 等元件，其實都是使用 Shadow DOM 來封裝其複雜的內部結構。通常情況下，我們無法直接看到或控制 Shadow DOM 隱藏的內容。
 

關鍵技術詞彙

 
在使用 Shadow DOM 時，有幾個核心術語需要了解：
• Shadow host (影子宿主)： 這是 Shadow DOM 附加到的常規 DOM 節點，例如 div 或 button 等。
• Shadow tree (影子樹)： 這是 Shadow DOM 內部的 DOM 樹結構。
• Shadow root (影子根)： 這是 Shadow DOM 的根節點，即影子樹的起點。
• Shadow boundary (影子邊界)： 這是 Shadow DOM 終止，常規 DOM 開始的地方。
 

如何建立與模式 (Mode)

您可以使用 Element.attachShadow() 方法將 Shadow DOM 附加到指定的元素（Shadow host）上
。呼叫此方法時，必須設定 mode：
1. mode: 'open' (開放模式)：
    ◦ 代表頁面的 JavaScript 可以透過影子宿主的 shadowRoot 屬性來存取並操作此 Shadow DOM 的內部。
2. mode: 'closed' (關閉模式)：
    ◦ 代表不允許外部程式操控此 Shadow DOM。此時呼叫 shadow.shadowRoot 會回傳 null。例如 <input type="range"> 的 shadowRoot 就無法被外部取得。
比喻： 您可以將 Shadow DOM 想像成一個獨立的房間，建置在一個大樓（主 DOM 樹）內。這個房間擁有自己的獨立裝潢（CSS）和家具（HTML 結構）。