Web Components 下全局 CSS Reset 的样式优先级难题

核心思路：移除组件样式的!important，利用CSS特异性实现正常级联 #

你的问题根源是给组件的:host样式加了!important，导致外部样式无法覆盖。实际上，:host伪类的优先级高于全局的*选择器，完全不需要!important就能覆盖全局重置：

步骤1：修改组件内Shadow Root样式 #

把原来带!important的代码改成：

:host {
  padding: 16px;
}

全局*选择器的特异性是0,0,0,0，而:host伪类的特异性是0,0,1,0，优先级更高，自然能覆盖全局的padding:0。

步骤2：外部DOM中正常覆盖样式 #

现在外部的样式不需要!important就能生效：

wc-foo.special-case {
  padding-top: 0;
}

这个选择器的特异性是0,0,1,1（类选择器+元素选择器），比:host的0,0,1,0更高，符合正常的CSS级联规则，会覆盖组件内的padding-top。

极端情况处理（如果全局重置带!important） #

如果你的全局重置是带!important的（比如* { padding:0 !important; }），可以用:host结合属性选择器提升特异性，同时避免自己加!important：

:host([class]) {
  padding: 16px;
}

这个选择器的特异性是0,0,1,1，比带!important的全局*优先级更高（特异性更高的选择器即使不带!important，也能覆盖低特异性带!important的规则）。此时外部的wc-foo.special-case特异性是0,0,2,1，依然可以覆盖组件样式。

内容的提问来源于stack exchange，提问作者run_the_race