阴影DOM <style>中的CSS优先级
关于影子DOM中的<style>标签，CSS优先级规则说明了什么？
我有一个元素<component class="component">，这是一个包含在<head>中的CSS文件，其中包含：
component {
display: inline-block;
}在某个影子DOM中有一个<style>标记，其中包含：
::slotted(.component) {
display: block;
}如果我理解正确的话，第一个规则应该有0.0.1的特异性，因为它有一个元素，第二个规则有0.1.1的特异性，因为它有一个伪元素和一个类。因此，第二个更具体，应该覆盖第一个。然而，这并不会发生。在开发人员的控制台(Chrome)中，我看到了这两条规则，它们都没有被划掉，在"computed styles“面板中，我看到了”display:inline-block“。
根据评论中的要求，提供了更详细的示例：
<head>
<style>
/* "other-component" related styles: */
other-component {
display: inline-block;
}
</style>
</head>
<body>
<some-component>
#shadow-root:
<style>
slot[name=some-slot]::slotted(*) {
display: block; /* Only works with !important. */
}
</style>
<slot name="some-slot"></slot>
<!-- The actual ("light-dom") content: -->
<other-component slot="some-slot"></other-component>
</some-component>
</body>回答 2
Stack Overflow用户
发布于 2019-03-04 07:20:12
此行为在CSS Scoping Module Level 1 Draft §3.3中定义
当比较两个具有不同树上下文的声明时，对于正常规则，阴影中较早的声明-包括树顺序-
[the first, global rule]获胜，而对于重要规则，较晚的声明在阴影中-包括树[the second, ::slotted(*) rule]顺序-获胜。
注意:这与作用域样式的工作方式相反。
在分发之前应用的
样式在分发之后将继续应用。
Stack Overflow用户
发布于 2019-05-23 18:33:13
我们可能会在https://github.com/w3c/csswg-drafts/issues/2290#issuecomment-382465643上对设计有最深入的解释
在当前的设计中有几个原因：
我们故意不涉及任何细节。这样做会暴露组件的实现细节，这会使代码变得脆弱-如果组件被更新并更改了它使用的确切选择器，它可能会开始覆盖以前获胜的外部规则，反之亦然，并且组件的用户没有好的方法来理解或操作这一点。
因此，我们必须以其他方式做出决定。文档顺序(最后的级联步骤)在这里实际上不起作用-它在加载自定义元素的确切方式上添加了一个意想不到的依赖，并且可能会有有趣的竞争
所以我们只剩下Cascade Origin，或者类似的东西，毫无保留地让一个或另一个获胜。实际上，向列表中注入一个新的来源似乎不是一个好主意；还不清楚用户与作者样式表应该如何与此交互。因此，我们为此添加另一个级联步骤。
最后，我们必须决定哪一方获胜。我们已经知道，无论我们选择什么顺序，!important都应该有相反的顺序；这就是级联起源的工作方式。因此，我们必须决定外部页面是否在默认情况下获胜，但组件在!important中获胜，还是相反。我们认为前者更有意义；这意味着组件作者的普通样式是“默认值”，组件用户的样式(！重要与否)可以覆盖它，组件作者的！重要样式可以用来“锁定”需要保持原样的样式。反过来看，似乎也不能满足用例:这意味着组件用户在默认情况下不能重写样式；他们必须使用！重要的是这样做，可能会干扰他们的其他样式；然后组件作者将无法“锁定”样式。
https://stackoverflow.com/questions/54884345
复制相似问题