重置 `!important` CSS 并允许使用 JS 进行样式设置

Question

我正在构建一个将直接嵌入到第三方网站的 React 小部件。我想完全重置应用于我的小部件容器<div> 的 CSS，使其不受主机站点的 CSS（包括!important）的影响。该项目使用 React、Webpack、CSS modules 和一些 PostCSS 插件。

我的 CSS 模块设置确实创建了唯一的私有 CSS 名称，它们不应与主机站点的 CSS 冲突。但是，这并不能保护主机站点 CSS，例如只选择所有buttons。

为了解决这个问题，我一直使用Cleanslate 作为重置样式表，它使用所有!important 规则。这成功地阻止了来自主机站点的 CSS 被应用。然而，为了在 Cleanslate 之上应用我自己的 CSS，我必须在我的所有 CSS 上使用!important 并增加我的 CSS 的特异性。我正在使用 PostCSS 插件来做这两件事。

不过，我还想在 React 中设置一些样式。我一直在为我的 DOM 元素添加内联样式（例如 style={{ color: "red" }}）。但是，由于我将 !important 添加到我的所有 CSS 中，这些内联样式总是被我的其他 CSS 覆盖。

除了 Cleanslate：

• 我查看了 all: unset，但遇到了与 Cleanslate 相同的问题 - 要覆盖 !important CSS，我必须在我的所有 CSS 中使用 !important。
• 我也考虑过像styled-components 这样的CSS-in-JS 解决方案，但styled-components 至少没有一种简单的方法可以始终应用!important（您可以使用&&& 提高特异性，但这并没有'不要覆盖!important）。

任何关于更改我当前的 CSS/JS 设置或其他可以完成此设置的设置的建议将不胜感激。 （也许影响深远的 !important 主机站点 CSS 太小了，不用担心。）谢谢！

TL;DR：第三方网站上的 React 小部件。我想覆盖主机站点的 CSS（包括!important），但也能够使用 JS 设置样式。

Answer 1

Shadow dom 之前的顶级技术是 <iframe>，但在外部配置或做出一些聪明的行为是很痛苦的。

看看Shadow dom：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Shadow dom 是一个非常酷的原生功能，可让您创建 Web 组件。在引擎盖下，Angular 也使用它。

过去，我自己构建了一个小部件。并浏览了所有选项，但最后，我发现最好的解决方案是 shadow dom，而 JivoChat 通过创建自己的元素（如 <jdiv>）来做类似的事情，这将允许您安全地封装和设置小部件的样式。

查看 JivoChat：https://www.jivochat.com/