什麼是 Shadow DOM？打造獨立運作的 Web 元件

2025-02-22 10:50:25

在現代網頁開發中，元件化是一個重要趨勢。當我們開發複雜的 UI 或 Web Components 時，常常會遇到樣式污染或 DOM 結構混亂的問題。這時候，Shadow DOM 就是一個理想的解決方案。

本文將帶你深入了解什麼是 Shadow DOM、它的特點與應用，並提供簡單的範例來幫助你快速上手。

什麼是 Shadow DOM？

Shadow DOM 是 Web Components 的核心技術之一。它允許開發者在主頁面 DOM 之外，建立一個獨立的「影子樹」（Shadow Tree），並封裝其內部的 HTML 結構、CSS 樣式與 JavaScript 行為。

這個獨立的 DOM 結構與主頁面是隔離的，外部無法直接存取，內部的 CSS 也不會影響外部元素，從而避免了常見的樣式衝突問題。

為什麼需要 Shadow DOM？

在傳統的網頁開發中，當網站變得越來越複雜時，會面臨以下挑戰：

樣式污染：全局 CSS 容易導致樣式衝突。
DOM 結構混亂：多個元素混在一起，容易導致維護困難。
JavaScript 互相干擾：不同模組之間可能會互相影響。

Shadow DOM 提供了獨立的作用域，能有效隔離元件的結構與樣式，解決這些常見問題。這對於開發大型專案、UI 元件庫或自訂元素（Custom Elements）非常重要。

如何使用 Shadow DOM？

使用 Shadow DOM 非常簡單，只需要透過 JavaScript 的 attachShadow() 方法即可建立一個獨立的 DOM 節點。

<!-- 自訂元件 -->
<custom-element></custom-element>

class MyComponent extends HTMLElement {
            constructor() {
                super();

                // 建立 Shadow DOM 並附加到元素上
                const shadow = this.attachShadow({ mode: 'open' });

                // 設定內部結構與樣式
                shadow.innerHTML = `
                    <style>
                        p {
                            color: red;
                            font-weight: bold;
                        }
                    </style>
                    <p>這是 Shadow DOM 內的內容</p>
                `;
            }
        }

// 定義自訂元素
customElements.define('custom-element', MyComponent);

Shadow DOM 的模式（mode）

在建立 Shadow DOM 時，可以設定兩種模式：

open：允許外部透過 JavaScript 存取影子 DOM，例如：element.shadowRoot。
closed：外部無法存取影子 DOM，增強了封裝性。

const shadow = this.attachShadow({ mode: 'closed' });
console.log(this.shadowRoot); // 這裡會回傳 null

Shadow DOM 的核心特點

特性	主 DOM	Shadow DOM
樣式隔離	會受到全局 CSS 影響	不會被外部樣式影響，內部樣式也不會外洩
結構隔離	與其他元素共享 DOM 結構	內部 DOM 完全獨立
外部存取	可以任意存取	`mode: closed` 時無法存取
適用場景	一般網頁內容	封裝元件（例如自訂按鈕、卡片等）