为什么ShadowRoot中的color:inherit不能从根元素继承颜色？
在这个 ShadowRoot 示例中，Hello World 的颜色是蓝色，尽管它被明确设置为继承颜色。为什么颜色没有从被设为红色的根元素 shadowRootContainer 继承？
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style>
* {
color: blue;
}
</style>
</head>
<body>
<div id="shadowRootContainer"></div>
<script>
const shadowRootContainer = document.getElementById("shadowRootContainer");
const shadowRoot = shadowRootContainer.attachShadow({mode: "closed"});
shadowRoot.innerHTML = `
<style>
:host{
color: red;
}
</style>
<span style="color:inherit;">
Hello World
</span>`;
</script>
</body>
</html>
解决方案
继承机制本身工作正常。然而，Shadow DOM的外部普通规则优先于内部规则，忽略通常的特异性（原因见文末）。
如果你查看开发者工具，你会注意到来自 * 的 <div id="shadowRootContainer"> 的蓝色覆盖了 :host{color:red} 的规则，即使 :host 似乎具有更高的特异性。这是因为按照级联 [spec]：
文档语言可以提供混合来自不同封装上下文的声明，例如 [DOM] 中阴影树的嵌套树上下文。
当比较来自不同封装上下文的两个声明时，对于普通规则，来自外部上下文的声明胜出，而对于 !important规则，来自内部上下文的声明胜出
你可以在下方的示例中看到：在相同的情形下，若两者都是 !important，:host 规则将成为胜出者。否则，如果两者都是普通规则，外部规则将胜出（就像你的情况）。
const shadowHTML = `
<style>
:host(#shadowRootContainerNormal){ color: red; }
:host(.testImportant){ color: red !important; }
</style>
<span style="color:inherit;">Hello World</span>`;
const shadowRootContainerNormal = document.getElementById("shadowRootContainerNormal")
const shadowRootNormal = shadowRootContainerNormal.attachShadow({
mode: "open"
});
shadowRootNormal.innerHTML = shadowHTML;
const shadowRootContainerImportant = document.getElementById("shadowRootContainerImportant");
const shadowRootImportant = shadowRootContainerImportant.attachShadow({
mode: "open"
});
shadowRootImportant.innerHTML = shadowHTML;
/*Wins even with lower specificity*/
.testNormal {
color: blue;
}
/*Loses even with higher specificity*/
#shadowRootContainerImportant {
color: blue !important;
}
<div id="shadowRootContainerNormal" class="testNormal"></div>
<div id="shadowRootContainerImportant" class="testImportant"></div>
注：这项设计起初看起来并不直观，但在同一规范中他们也说明了两者的原因：
这实际上意味着，属于某个封装上下文的普通声明可以设定易于被外部上下文覆盖的默认值，而属于封装上下文的重要声明可以强制执行不可被覆盖的要求，外部上下文无法覆盖。
站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。
相关文章
汇集全球数千款 AI 工具，每日持续更新，配套 AI 开发学习资源，轻松用 AI 提升工作效率。快捷键 Ctrl+D/⌘+D 一键收藏本站。