在 Shadow DOM 中，覆盖 CSS body *

Question

我有以下场景：

Printscreen of my problem

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

body * {
  font-family: 'x'
}

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

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

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

Answer 1

回答这个问题所需的大部分信息都可以在this related answer 中找到。总而言之：没有!important 的文档范围样式将始终覆盖没有!important 的shadow dom 样式，如果它们应用于相同的元素。

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

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

使用 !important：

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

将body * 规则缩减为仅body：

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