在現代網頁開發中，元件化是一個重要趨勢。當我們開發複雜的 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 時無法存取 |
| 適用場景 | 一般網頁內容 | 封裝元件（例如自訂按鈕、卡片等） |
Shadow DOM 的實際應用場景
- 自訂 UI 元件：按鈕、卡片、工具提示等可重複使用的 UI 元件。
- 避免樣式污染：在大型專案或 UI 框架中避免 CSS 衝突。
- 封裝複雜功能：表單驗證、模態視窗、滑動選單等複雜功能的獨立封裝。
Shadow DOM 的優點與限制
優點
- 提供完整的封裝機制，防止樣式與行為污染。
- 增強元件的可重用性與可維護性。
- 讓開發大型專案更加簡單高效。
限制
- SEO 支援有限（適合用於非關鍵內容）。
- 開發與除錯可能稍微複雜，需要熟悉 Web Components 相關知識。
- 舊版瀏覽器可能不完全支援（需注意兼容性）。
結論
Shadow DOM 是現代前端開發中不可或缺的技術，尤其適用於開發可重用、獨立且封裝良好的 Web Components。透過 Shadow DOM，可以有效避免樣式衝突、DOM 結構混亂與 JavaScript 互相干擾等問題。
如果你正在開發自訂 UI 元件，或是想要打造更穩定、更可維護的前端架構，Shadow DOM 絕對是一個值得學習與應用的技術！
