为什么`color'影响阴影根？ [英] Why does `color` affect shadow roots?

问题描述

我注意到，当我执行以下操作（

没有背景的上述片段的屏幕截图和 color：green

解决方案

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

span 没有从 span CSS 规则继承， >

的 div 元素传播

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

  let div = document.querySelector（'div'）let root = div.attachShadow（{mode：'closed'}）let span = document.createElement（'span'）span.textContent =Text在SPAN中，但颜色从DIVroot.appendChild（span） 

  div {/ * background-color：rgba（0,255,0，.1）; * / color：green;} span {background-color：rgba（255,0,0，.2） color：red;}  

 < h4& DOM：< / h4>< div id =v1> DIV的文字和颜色< / div>< h4>无阴影DOM：< / h4>< div> DIV的文字和颜色< span> ; SPAN的文字和颜色< / span>< / div>  

更新：如@poke所示：

shadow DOM只关闭CSS规则，

这就是为什么Shadow这个名字是有表现力和有意义的。

你经历的背景对于正常的CSS和DOM也是如此（与Shadow DOM封装无关）。

I noticed that when I do the following (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>

The color property is propagated in to the shadow root, whilst the background property is not. Which part of the specification defines this behavior and why is this? I was under the impression that shadow roots were primarily meant for the encapsulation of DOM trees.

Screenshot of the above snippet:

Screenshot of the above snippet without the background and with just color: green

解决方案

It's an optical illusion, due to the use of * and opacity.

The span didn't inherit from the span CSS rule, the color and background are propagated from the div element under the shadow.

See code below with distinct colors. Inspect the Styles properties with Chrome Dev Tool to see the ones that apply.

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>

Update: As @poke stated:

The shadow DOM only shuts off the CSS rules but not the inheritance that happens in the document.

That's why the name "Shadow" is expressive and meaningfull.

What you experienced with the background is also true for normal CSS and DOMs (not related to Shadow DOM encapsulation).

这篇关于为什么`color'影响阴影根？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！