影子DOM< style>中CSS的优势 [英] CSS precendence in shadow DOM <style>
问题描述
CSS优先规则对影子DOM中的<style>标签有何看法?
What do the CSS precendence rules say about the <style> tag in shadow DOM?
我有一个元素<component class="component">，它是<head>中包含的CSS文件，
I have an element <component class="component">, a CSS file included in <head> with:
component {
display: inline-block;
}
和一些影子DOM中的<style>标记，其内容如下:
and a <style> tag inside some shadow DOM with:
::slotted(.component) {
display: block;
}
如果我正确理解，则第一个规则应具有0.0.1的特异性，因为它具有一个元素，而第二个规则应具有0.1.1的特异性，因为它具有一个伪元素和一个类.因此，第二个更具体，应该覆盖第一个.不过这不会发生.在开发者控制台(Chrome)中，我看到了两个规则，但都没有删除，在计算样式"面板中，我看到了显示:内联块".
If I understand it correctly, the first rule should have a specificity of 0.0.1 as it has one element and the second one specificity of 0.1.1 as it has one pseudo-element and one class. Therefore, the second one is more specific and should override the first one. This doesn't happen though. In the developer's console (Chrome) I see both the rules and neither of them crossed out and in the "computed styles" panel I see '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>
推荐答案
此行为在 CSS范围界定模块1级草案§3.3:
当比较两个具有不同树上下文的声明时，对于常规规则，则以包含阴影的树顺序
[the first, global rule]的较早者为准，对于重要规则，则以包含阴影的树[the second, ::slotted(*) rule]顺序的较晚者为准胜了.
When comparing two declarations that have different tree contexts, then for normal rules the declaration earlier in the shadow-including tree order
[the first, global rule]wins, and for important rules the declaration coming later in the shadow-including tree[the second, ::slotted(*) rule]order wins.
注意:这与范围样式的工作方式相反.
Note: This is the opposite of how scoped styles work.
在其他世界:
在分发之前应用的样式在分发之后继续应用.
Styles that applied before distribution continue to apply after distribution.
这篇关于影子DOM< style>中CSS的优势的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
