这是我拥有的简单HTML。h1在阴影根内，但它是绿色的。这种从阴影 DOM 外部的父元素继承颜色的行为是预期的吗？我想知道，因为元素选择器不能跨越阴影边界(h1样式不适用于阴影根内的h1(
<head>
<style>
body { color: green }
h1 { color: red; }
</style>
</head>
<my-element>
#shadow-root
<h1>text is green</h1>
</my-element>
理想情况下，我正在寻找定义此行为的规范的一部分。
是的，此行为是意料之中的。从规格：
影子树的顶级元素继承自其宿主元素。
在您的情况下，阴影宿主my-element从body元素继承颜色。h1，在my-element的影根，继承自my-element。
存在 shadowHost 和 shadowRoot。
shadowRoot是附加到元素以提供影子 DOM 的内容。
影子主机是影子根所附着的内容。
当你在 html 页面中定义一些平面的东西时，它会附加到正文元素 shadowroot。 同样，它附着在身体的shadowDOM上，或者身体作为shadowHost。
我想这是默认行为作为"默认影子根"。你写的地方是"文本是绿色的"，因为正文应该是页面内容的根元素。而 html 标签描述文档语言。头部定义元数据内容。
所以绿色风格被正确地继承了。