了解 Shadow DOM 以及何时使用它-css教程-PHP中文网

了解 Shadow DOM 以及何时使用它

DDD

发布： 2024-10-11 10:23:29

原创

387 人浏览过

Understanding the Shadow DOM and When to Use It

了解 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 样式保持独立，确保嵌入小部件的任何网站的外观一致。