为什么应用于 body 的颜色会影响 shadow-root

Question

这是我的简单 HTML。 h1 在影子根内，但它是绿色的。这种从阴影 DOM 之外的 parent 元素继承颜色的行为是否符合预期？我想知道是因为元素选择器无法跨越阴影边界（h1 样式未应用于阴影根内的 h1）

<head>
 <style> 
    body { color: green } 
    h1 { color: red; }
 </style>
</head>

<my-element>
  #shadow-root
    <h1>text is green</h1>
</my-element>

理想情况下，我正在寻找定义此行为的规范的一部分。

Answer 1

存在 shadowHost 和 shadowRoot。

shadowRoot 是附加到元素以提供阴影的东西 DOM。

shadowHost 是影子根所依附的。

显然，当您在 html 页面中定义平面内容时，它会附加到 body 元素 shadowroot。同样说它附加到 body 的 shadowDOM，或者 body 作为 shadowHost.

我想这是 'default shadowRoot' 的默认行为。你在哪里写 'text is green' 因为 body 应该是页面内容的根元素。而 html 标签描述文档语言。 head 定义元数据内容。

所以绿色风格被正确继承了。

Answer 2

是的，这种行为是预期的。来自 spec:

The top-level elements of a shadow tree inherit from their host element.

在您的例子中，影子宿主 my-element 继承了 body 元素的颜色。 h1，在 my-element 的阴影根中，继承自 my-element。

为什么应用于 body 的颜色会影响 shadow-root

Why color applied to a body affects shadow-root

html

css

shadow-dom