为什么`color`影响阴影根？

我注意到，当我做了以下（note: this is Shadow DOM v1!）为什么`color`影响阴影根？

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

截图上面的片段的：将上面的片段的不background

截图以及与刚color: green

来源

2016-08-03 David Mulder

你可能会添加一张这张照片的截图吗？我很好奇，但不能打扰让Chrome浏览器运行这个^^“ – poke

@poke：Added。这里是Supersharp的答案截图http://imgur.com/a/QYl7J –

这是一个光学错觉，由于使用的*和不透明度。

的span没有从跨度CSS规则继承时，颜色和背景从阴影下div元素传播。

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

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

影子DOM只有关闭的CSS规则，但不是发生在文档中的继承。

这就是为什么名称“影子”是表达和意义。

背景对于普通的CSS和DOM（与Shadow DOM封装无关）也是如此。

来源

2016-08-03 16:08:43 Supersharp

尝试设置颜色为绿色并移除背景;） –

可能我可能误解了影子dom，为什么'div'的颜色会影响第一种情况下的'span'？因为您看到'SPAN中的文本' line in green以及 –

像'font'这样的许多其他属性的颜色是继承的，这使得span的文本与包含shadow DOM的div具有相同的颜色，现在，背景默认情况下不会被继承但是默认情况下是透明的，所以span的背景是透明的，这使得span没有自己的背景，shadow DOM只关闭CSS *规则*，而不是文档中发生的继承。否则，您将无法更改组件的字体，例如，没有为每个组件单独指定它。 – poke

为什么`color`影响阴影根？

回答

相关问题