为什么应用于身体的颜色会影响阴影根答案

【问题标题】：Why color applied to a body affects shadow-root为什么应用于身体的颜色会影响阴影根
【发布时间】：2018-05-21 14:36:13
【问题描述】：

这是我拥有的简单 HTML。 h1 在阴影根中，但它是绿色的。这种从 shadow DOM 之外的父元素继承颜色的行为是预期的吗？我想知道，因为元素选择器不能跨越阴影边界（h1 样式不适用于阴影根内的h1）

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

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

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

【问题讨论】：

@cale_b：这个问题不仅没有提到阴影树，而且这里的提问者似乎理解什么是继承，并且只是询问它是否适用于从轻元素到它们的阴影树后代。该问题的公认答案确实告诉您，这不是“级联”的意思。
谢谢大家——完全错过了“shadow dom”标签。一直在学习！
@BoltClock，是的，谢谢，这正是我的问题。我更新了我的示例，使问题更加明确。
Light DOM style leaking into Shadow DOM的可能重复

标签： html css shadow-dom

【解决方案1】：

是的，这种行为是意料之中的。来自spec：

影子树的顶级元素继承自它们的宿主元素。

在您的情况下，影子主机my-element 从body 元素继承颜色。 h1，位于my-element 的影子根中，继承自my-element。

【讨论】：

我突然想到这个文本不再出现在最新的版本中，这是相当老的 - 我正在四处寻找它是否仍然存在于当前的草稿中。我能找到的最接近的是section 3.1 of the editor's draft，但该文本是信息性的，而不是规范性的。
知道了，感谢您提供规范的链接。据我了解，这同样适用于自定义属性（CSS 变量）？我已经测试过，它们似乎能够跨越阴影 DOM 边界。他们这样做应该是有道理的，因为他们是机制而不是 >>> 选择器。
@AngularInDepth.com：自定义属性确实总是被继承的，所以我希望它们的行为方式相同。

【解决方案2】：

存在 shadowHost 和 shadowRoot。

shadowRoot 是附加到元素以提供影子 DOM 的内容。

shadowHost 是影子根所附加的。

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

我猜这是“默认 shadowRoot”的默认行为。你在哪里写“文本是绿色的”，因为 body 应该是页面内容的根元素。而 html 标签描述文档语言。而head定义了元数据内容。

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

【讨论】：