为什么“颜色”会影响阴影根？

Question

我注意到当我执行以下操作时 (note: this is Shadow DOM v1!)

let div = document.querySelector('div');
let root = div.attachShadow({mode: 'closed'});
let span = document.createElement('span');
span.textContent = 'Super hot!';
root.appendChild(span);

*{
  background: rgba(0,0,0,.1);
  color: rgba(0,0,0,.4);
}

<div></div>

color 属性会传播到影子根，而background 属性不会。规范的哪一部分定义了这种行为，为什么会这样？我的印象是影子根主要用于封装 DOM 树。

上面sn-p的截图：

没有background 和只有color: green 的上述sn-p 的屏幕截图

Answer 1

这是一种视错觉，由于使用了* 和不透明度。

span 没有继承自 span CSS 规则，color 和 background 是从 div 元素传播的在阴影下。

请参见下面带有不同颜色的代码。使用 Chrome 开发工具检查 Styles 属性以查看适用的属性。

let div = document.querySelector('div')
let root = div.attachShadow({mode: 'closed'})
let span = document.createElement('span')
span.textContent = "Text in the SPAN, but colors from DIV"
root.appendChild(span)

div {
  /*background-color: rgba(0,255,0,.1);*/
  color: green;
}
span {
  background-color: rgba(255,0,0,.2);
  color: red;
}

<h4>SPAN in Shadow DOM:</h4>
<div id="v1">Text and colors from DIV</div>

<h4>No Shadow DOM:</h4>
<div>Text and colors from DIV<span>Text and colors from SPAN</span></div>

更新：正如@poke 所说：

shadow DOM 只关闭 CSS 规则，但不关闭文档中发生的继承。

这就是为什么“影子”这个名字富有表现力和意义的原因。

您对背景的体验也适用于普通 CSS 和 DOM（与 Shadow DOM 封装无关）。