了解 Shadow DOM 以及何时使用它

发布日期： 2024-10-11 阅读量： 作者： 网络

了解 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>

# css # git

下一篇: C++ lambda 表达式与闭包的语法和用法

了解 Shadow DOM 以及何时使用它

随便看看