为何body设置的color会影响Shadow Root？求规范依据

这种行为完全符合规范预期，咱们可以从两个核心角度来拆解：

1. Shadow DOM的选择器隔离 vs 样式继承的本质区别 #

Shadow DOM最核心的价值之一就是样式封装——外部的普通元素选择器（比如你代码里的h1 { color: red; }）确实无法穿透#shadow-root去选中内部的元素，这是刻意设计的隔离机制，避免组件内部样式被外部干扰，也防止组件样式污染全局。

但CSS里的继承属性（像color、font-size、line-height这类默认会从父元素往下传递的属性）是这个隔离规则的例外：它们会沿着DOM的继承链自动传递，哪怕中间隔着Shadow根。在你的例子里，<my-element>本身继承了外部body的color: green，而Shadow根内部的<h1>又会从<my-element>（也就是Shadow宿主）继承这个颜色值，所以最终显示绿色。

如果想打破这个继承，你可以在Shadow内部的样式里显式给<h1>设置颜色（比如h1 { color: red; }），或者给<my-element>设置color: initial来阻断继承链。

2. 定义该行为的规范条款 #

在CSS Scoping Module Level 1规范中，明确规定了继承属性跨Shadow根的传递规则：

继承属性的值会从Shadow宿主元素传递到Shadow根的上下文，Shadow根内部的元素会遵循正常DOM的继承规则获取这些值，除非Shadow内部的样式显式覆盖了继承而来的属性值。

更具体来说，Shadow根会被当作继承链中的一个节点，它会继承宿主元素的所有可继承属性，然后内部元素再从Shadow根继承这些属性——就像Shadow根是一个普通的DOM容器元素一样。

同时规范也明确了选择器的限制：外部选择器无法匹配Shadow内部的元素，除非使用::slotted()伪元素选中插槽内的内容，或者通过CSS自定义属性（变量）来传递样式值。

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