代码之家 › 专栏 › 技术社区 › Max Koretskyi

为什么应用于主体的颜色会影响阴影根

shadow-dom css html

Max Koretskyi · 技术社区 · 6 年前

这是我拥有的简单HTML。 h1 在阴影根中,但它是绿色的。是否需要从阴影dom外部的父元素继承颜色?我想知道,因为元素选择器不能跨越阴影边界( H1 样式不应用于 H1 在阴影根中)

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

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

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

2 回复 | 直到 6 年前

BoltClock 6 年前

是的,这种行为是预期的。来自 spec :

阴影树的顶级元素从其宿主元素继承。

在你的例子中,影子主机, my-element ,从 body 元素。这个 h1 ,位于 我的元素 ,继承自 我的元素 .

Sam 6 年前

存在一个shadowhost和shadowroot。

阴影根 是附加到元素以提供阴影DOM的内容。

阴影主机 是阴影根附加到的。

另外,当您在HTML页面中定义平面时,它会附加到body元素shadowroot。也就是说它附着在身体的阴影中,或者身体作为阴影宿主。

我想这是默认行为,作为“默认的shadowroot”。在编写“text is green”时,因为body应该是页面内容的根元素。而HTML标记描述文档语言。head定义元数据内容。

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

推荐文章

Max Smaleha · 聚合物2事件

7 年前

dangerChihuahua007 · 聚合物模块中有多个插入点?

8 年前

Flavien Volken · Angular 2.0从左到右模块和阴影DOM

8 年前

Estus Flask · Angular 2原生视图封装

8 年前

corysimmons · 使用JavaScript和/或CSS选择阴影DOM?

9 年前

cbfranca · 聚合物中的嵌套模板

9 年前

lebod · 带选择器的聚合物/阴影dom通用选择器

10 年前

Rob · 聚合物-造型主机的子节点

10 年前

user715564 · 将内容元素中的自定义元素与聚合物一起使用

10 年前

Günter Zöchbauer · 指针事件目标始终是最外层的Polymer元素

10 年前