ShadowDOM：每個 Web 開發人員都應該知道的被低估的寶石

了解 ShadowDOM：保持 Web 元件不變的關鍵

在 Web 開發領域，開發人員經常負責創建需要可重複使用且獨立於其所處環境的元件。這就是 Shadow DOM 發揮作用的地方 - 一種技術允許開發人員封裝元素的內部結構，使其不受周圍的外部樣式或腳本的影響。

但是為什麼這很重要？它如何改變了我的產品 LiveAPI 的使用者體驗？讓我們深入探討一下！

什麼是 ShadowDOM？

Shadow DOM 是一種 Web 標準，它提供了一種在宿主元素內隔離 DOM（文件物件模型）片段的方法。這種隔離意味著影子樹的內部結構和樣式與頁面的其餘部分保持分離。簡單來說，這就像是在 DOM 中創造一個不受外界影響的迷你 DOM。

使用 Shadow DOM，您可以定義元件的 HTML、CSS 和 JavaScript，以確保它不會與頁面的其他部分衝突。這使其成為建立可重複使用、模組化和可擴展組件的重要工具。

ShadowDOM 如何解決 LiveAPI 的挑戰

LiveAPI 是我正在開發的產品，只需連接您的 Git 儲存庫即可協助立即建立 API 文件。

為了讓產生的文件具有互動性，我們開發了可以嵌入的 LiveAPI 小工具。這就是我們面臨的挑戰。

在初始階段，我們在各個網站上嵌入 LiveAPI 小工具時面臨重大挑戰。我們的小部件旨在執行 API 請求並以用戶友好的方式顯示結果。然而，如果沒有 Shadow DOM，我們發現該小部件會因為與其他頁面樣式衝突而在某些情況下表現不佳。

這裡出了問題：

• 樣式覆蓋：小部件的內部樣式通常會被主頁中的全域樣式覆蓋。這導緻小部件根據嵌入位置的不同看起來有所不同，從而導致用戶體驗不佳。
• JavaScript 衝突：小部件的 JavaScript 也可能與主機頁面的腳本衝突，導致不可預測的行為並使其難以保持跨平台的一致性。

這就是 Shadow DOM 來拯救我們的地方。透過將我們的小部件封裝在影子樹中，我們確保：

1. 樣式獨立：小部件的內部 CSS 不再受主機頁面外部樣式的影響，保證無論嵌入何處，它看起來都一樣。
2. 腳本不會衝突：小部件的 JavaScript 獨立運行，減少與頁面上其他腳本衝突的風險。

因此，我們能夠為使用者創建無縫、一致的體驗，無論他們將小部件放置在何處。

如何使用 ShadowDOM：帶有程式碼範例的簡單指南

讓我們來探索如何在專案中使用 ShadowDOM。

1. 建立 Shadow DOM

要開始使用 ShadowDOM，您需要在現有元素上建立影子根。您可以透過在要附加影子 DOM 的元素上呼叫 AttachShadow() 方法來實現此目的。

以下是如何為 HTML 元素建立影子根的範例：

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShadowDOM Example</title>


    <div>



<p>In this example:</p>

<ul>
<li>The attachShadow() method creates a shadow root on the #shadow-host element.</li>
<li>The mode: 'open' option means that the shadow DOM is accessible via JavaScript (you can also use mode: 'closed' to make it inaccessible).</li>
<li>Inside the shadow root, we define some CSS and HTML that will be encapsulated within the shadow DOM.</li>
</ul>

<h4>
  
  
  2. <strong>Accessing the Shadow DOM</strong>
</h4>

<p>If you set the shadow DOM’s mode to open, you can access the shadow tree via JavaScript. Here’s an example of accessing and modifying the shadow DOM:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    const shadowHost = document.getElementById('shadow-host');
    const shadowRoot = shadowHost.shadowRoot; // Accessing the shadow root

    // Modify the shadow DOM
    const paragraph = shadowRoot.querySelector('p');
    paragraph.textContent = "The shadow DOM content has been updated!";
</script>

在此程式碼中：

• 我們使用shadowHost.shadowRoot 存取影子根。
• 然後我們選擇

  來修改 Shadow DOM 內的內容。元素並更改其文字。

3. Shadow DOM 內部的樣式

讓我們嘗試在 ShadowDOM 中設定元件的樣式。這將與網站的其餘部分隔離。

<script>
    const shadowRoot = host.attachShadow({mode: 'open'});

    shadowRoot.innerHTML = `
        <style>
            p {
                color: red;
                font-weight: bold;
            }
            div {
                background-color: lightgray;
                padding: 10px;
                border-radius: 5px;
            }
        
        <div>
            <p>This paragraph is styled inside the shadow DOM.
        </script>