在現代 Web 開發中，創建可重複使用和可維護的元件至關重要。 Shadow DOM 是 Web 元件標準的一部分，在實現這一目標方面發揮著至關重要的作用。本文深入探討了 Shadow DOM 的概念、它的優點以及如何在您的專案中有效地使用它。

什麼是 Shadow DOM？

Shadow DOM 是一種可讓您將 DOM 和 CSS 的一部分封裝在 Web 元件內的技術，確保其與文件的其餘部分隔離。這種封裝可以防止樣式和腳本洩漏或洩漏，從而更容易建立模組化和可維護的組件。

Shadow DOM 的關鍵概念

1. Shadow Tree：附加到 Web 元件的獨立、隱藏的 DOM 樹。
2. Shadow Root：影子樹的根節點。
3. Shadow Host：託管影子樹的常規 DOM 元素。
4. Shadow Boundary：影子樹與常規 DOM 之間的邊界。

Shadow DOM 的優點

1. 封裝

Shadow DOM 在元件的內部結構和應用程式的其餘部分之間提供了清晰的分離。這種封裝有助於防止樣式和行為衝突，使您的元件更可預測且更易於維護。

2. 風格隔離

使用 Shadow DOM，您可以定義僅適用於影子樹內內容的樣式。這種隔離確保元件的樣式不會影響頁面的其餘部分，反之亦然。

3. 增強的可重複使用性

封裝組件更可重複使用，因為它們是獨立的。您可以在不同的專案中輕鬆共用和使用這些元件，而無需擔心整合問題。

建立 Shadow DOM

讓我們來看一個在 JavaScript 中建立 Shadow DOM 的簡單範例。

在此範例中，我們定義了一個新的自訂元素 。在其建構函式中，我們使用 this.attachShadow({ mode: 'open' }) 附加一個影子根，然後向其附加一些內容。影子根中定義的樣式與文件的其餘部分隔離。

Shadow DOM 模式

在創建影子根時，可以指定其模式為開放或封閉。

• 開放模式：可以使用JavaScript存取shadow root，允許互動和操作。
• 封閉模式：影子根無法從JavaScript訪問，提供更高層級的封裝。

封閉模式範例

const shadow = this.attachShadow({ mode: 'closed' });

在此模式下，無法從元件外部存取影子，增加了額外的保護層。

Shadow DOM 樣式

您可以直接在 Shadow DOM 中定義樣式。這些樣式僅適用於影子樹中的內容。

const style = document.createElement('style');
style.textContent = `
    div {
        font-size: 20px;
        color: red;
    }
`;
shadow.appendChild(style);

透過將

結論

Shadow DOM 是一項強大的功能，它透過提供封裝和樣式隔離來增強我們建立 Web 元件的方式。透過利用 Shadow DOM，開發人員可以創建模組化、可重複使用且可維護的元件，這些元件可以無縫整合到任何 Web 應用程式中。對於任何現代 Web 開發人員來說，理解和利用 Shadow DOM 都是一項寶貴的技能。