为什么`颜色'会影响阴影根？

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

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

上述代码段的屏幕截图：

上面没有background且只有color: green

的代码段的屏幕截图

Answer 1

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

span没有继承 span CSS 规则，颜色和背景是从阴影下的div元素。

请参阅下面的代码，使用不同的颜色。使用Chrome开发工具检查样式属性，以查看适用的属性。

＆＃13;

＆＃13;

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)

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

更新：正如@poke所说：

  

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

这就是为什么这个名字＆＃34; Shadow＆＃34;是富有表现力和有意义的。

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