影子DOM <style>中CSS的优势

Question

关于阴影DOM中 <身体>     <某些组件>         ＃shadow-root：             <样式>                 slot [name = some-slot] :: slotted（*）{                     显示：块； / *仅适用于！important。 * /                 }                                   <！-实际（“光圈”）内容：->              

Answer 1

此行为在CSS Scoping Module Level 1 Draft §3.3中定义：

  

在比较两个具有不同树上下文的声明时，对于常规规则，则以包含阴影的树顺序[the first, global rule]中较早的声明为准，而对于重要规则，则包含阴影的树{{ 1}}订单获胜。

     

注意：这与范围样式的工作方式相反。

在other worlds中：

  

在分发之前应用的样式在分发之后继续应用。

Answer 2

我们可能会在https://github.com/w3c/csswg-drafts/issues/2290#issuecomment-382465643

上对设计进行最深入的说明

  

当前设计采用以下几个原因：

     

我们故意不涉及任何特异性。这样做会暴露组件的实现细节，这会使代码变得脆弱-如果组件被更新并更改其使用的确切选择器，则它可能会开始覆盖先前赢得的外部规则，反之亦然，并且组件的好方法也就没有了。用户理解或操纵它。

     

所以我们必须以其他方式做出决定。文档顺序（最后的层叠步骤）在这里实际上不起作用-它添加了对您如何加载自定义元素的确切方式的意外依赖，并且可能引起有趣的竞争

     

因此，我们只剩下Cascade Origin或接近它的东西，毫无保留地赢得了一场胜利。实际上，向列表中注入一个新的来源似乎不是一个好主意。尚不清楚用户样式表与作者样式表应如何交互。因此，我们为此添加了另一个层叠步骤。

     

最后，我们必须决定哪个获胜。我们已经知道无论选择哪种顺序，！important都应具有相反的顺序；这就是级联起点已经起作用的方式。因此，我们必须确定默认情况下外页是否获胜，但是组件以！important获胜，或者相反。我们认为前者更有意义；这意味着组件作者的常规样式是“默认值”，组件用户的样式（无论是否重要！）都可以覆盖它，并且组件作者的！important样式可以用于“锁定”需要保持其原样的样式。 。相反，似乎也无法满足用例：这意味着组件用户默认情况下无法覆盖样式；这意味着组件用户无法使用样式。他们必须使用！important这样做，可能会干扰其他样式；然后组件作者将无法“锁定”样式。