在 Shadow DOM 中，覆盖 CSS body *

Question

我有以下场景：

Printscreen of my problem

我在项目中有一个 CSS（我无法更改）定义以下内容：

body * {
  font-family: 'x'
}

而这个 CSS 正在影响我的影子 DOM，因此，我无法使用 font-family 属性不使用 !important。只有 !Important 有效：

::slotted(span), ::slotted(p){
    font-family: arial !important;
}

有人知道在这种情况下该怎么办吗？

Answer 1

回答此问题所需的大部分信息都可以在 中找到。总结：没有 !important 的文档范围样式将始终覆盖没有 !important 的阴影 dom 样式，如果它们适用于同一元素。

（在这种情况下，它们确实适用于同一元素：开槽元素存在于阴影之外 dom，因此文档样式表中的 * 规则可以找到它们。）

您已经找到了两个解决方法。为了完整起见，我将在此处列出它们：

使用 !important:

这很丑陋，但确实有效。 !important 不仅会覆盖所有非 !important 规则，还会覆盖来自文档范围样式表的任何 !important 规则！

将 body * 规则减少到 body:

这样，规则将不会直接应用于每个元素 - 它只会直接应用于 body，并通过继承影响所有其他元素。继承的规则可以被任何东西覆盖，因为它们只是在没有其他适用的情况下的后备。