了解 Shadow DOM 以及何時使用它

了解 Shadow DOM 以及何時使用它

Shadow DOM 是現代 Web 開發工具包中的強大功能，可協助開發人員封裝元素並隔離樣式。本質上，Shadow DOM 允許您在與頁面其餘部分完全隔離的元素內建立「迷你 DOM」。這意味著這個影子 DOM 內的 CSS 和 JavaScript 不會幹擾外部的任何內容，反之亦然。

Shadow DOM 解決的關鍵問題之一是 CSS 樣式洩漏，即為應用程式的一部分定義的樣式無意中影響其他部分，從而導致缺乏可預測性和難以維護的程式碼。 Shadow DOM 建立樣式邊界，防止此問題。

這是一個 Shadow DOM 特別有用的範例用例：

假設您有一個聊天機器人小部件（例如 Hexabot 小部件），您想要將其嵌入多個網站。每個網站都有自己的 CSS，某些樣式可能會幹擾您的小部件的外觀和行為。例如，網站可能具有

的全域樣式。元素，如果您的小部件的元素只是添加到 DOM，這些樣式可能會改變您的小部件的外觀和感覺。

為了防止網站的 CSS 與您的 widget 的 CSS 發生衝突，您可以利用 Shadow DOM 來封裝您的 widget。這是一個簡單的例子來說明這一點：

沒有 Shadow DOM：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="./style.css">
<script src="<<WIDGET URL>>/hexabot-widget.umd.js"></script>

<div id="hb-chat-widget"></div>
<script>
  const el = React.createElement;
  const domContainer = document.getElementById('hb-chat-widget');
  ReactDOM.render(
    el(HexabotWidget, {
      apiUrl: 'https://api.yourdomain.com',
      channel: 'offline',
      token: 'token123',
    }),
    domContainer,
  );
</script>

在此範例中，網站中的任何全域樣式都可能會幹擾小部件的外觀。

使用 Shadow DOM：

<script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="<<WIDGET URL>>/hexabot-widget.umd.js"></script>

<div id="hb-chat-widget"></div>
<script>
  // Create the shadow root and attach it to the widget container
  const widgetContainer = document.getElementById('hb-chat-widget');
  const shadowRoot = widgetContainer.attachShadow({ mode: 'open' });

  // Create a new div inside the shadow root to serve as the rendering target
  const shadowContainer = document.createElement('div');
  shadowRoot.appendChild(shadowContainer);

  // Add styles inside the shadow root by importing the CSS file into the shadow DOM
  const linkElement = document.createElement('link');
  linkElement.rel = 'stylesheet';
  linkElement.href = './style.css';
  shadowRoot.appendChild(linkElement);

  // Render the widget inside the shadow root
  const el = React.createElement;
  ReactDOM.render(
    el(HexabotWidget, {
      apiUrl: 'https://api.yourdomain.com',
      channel: 'offline',
      token: 'token123',
    }),
    shadowContainer,
  );
</script>

在此版本中，小部件在影子根內渲染。這意味著為網站定義的樣式不會影響小部件，反之亦然。小部件的 CSS 樣式保持獨立，確保嵌入小部件的任何網站的外觀一致。

什麼時候該使用 Shadow DOM？

當您需要建立不受應用程式其他部分影響或影響應用程式其他部分的自包含元件時，Shadow DOM 非常有用。以下是您應該考慮使用它的一些場景：

• 小工具或外掛程式： 在開發可以嵌入到各種環境中的可重複使用小工具時，使用 Shadow DOM 將防止外部 CSS 衝突。
• 複雜的 UI 元件：如果您正在建立自訂元素，例如滑桿、輪播或其他需要嚴格控制樣式的 UI 元件。
• 隔離需求：任何需要完全隔離 CSS 和 JavaScript 以避免無意互動的場景。

透過封裝元件的樣式和行為，Shadow DOM 可以成為開發人員建構模組化、可重複使用且強大的 Web 元件的重要工具。

Hexabot 即時聊天小工具使用此方法來確保跨不同網站的無縫且一致的使用者體驗，而不受外部樣式的任何干擾。如果您有興趣看到這一點，請隨時查看 Hexabot 並為 GitHub 存儲庫加註星標以支持該專案！

 
 為 Hexabot Github 儲存庫加註星標 ⭐
 

以上是了解 Shadow DOM 以及何時使用它的詳細內容。更多資訊請關注PHP中文網其他相關文章！