javascript - 重置 `!important` CSS 并允许使用 JS 样式

Question

我正在构建一个将直接嵌入第三方网站的 React 小部件。我想完全重置应用于我的小部件容器的 CSS <div> ，这样它就不会受到主机站点的 CSS(包括 !important)的影响。元素使用React、Webpack，CSS modules , 和一些 PostCSS 插件。

我的 CSS 模块设置确实创建了唯一的私有(private) CSS 名称，这些名称不应与主机站点的 CSS 冲突。但是，这并不能防止主机站点 CSS，例如只需选择所有 button

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

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

除了 Cleanslate:

• 我看了all: unset ，但遇到了与 Cleanslate 相同的问题——覆盖 !important CSS，我必须使用 !important在我所有的 CSS 中。
• 我还考虑过像 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/