了解 Shadow 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 以及何时使用它》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！