代码之家 › 专栏 › 技术社区 › pb4now

css变量:根vs:主机

shadow-dom css

pb4now · 技术社区 · 8 年前

刚开始webdevelopment(来自android) 在我的项目中,我试图在“:root”的帮助下分配变量,就像许多教程中提到的那样:

:root {
  --accentColor: #20a8d8;
  --primary: #96a1a5;
  --secondary: #415a72;
  --bgColorrr:#1e2e38;
}

但这根本不起作用。在将其更改为“:host”后,它仍能工作-请有人解释一下:root不工作背后的原因是什么?

值得一提的是:我在我的自定义组件(Angular 5)上使用了它,我正在使用CoreUI(以防这可能会影响一些CSS)

1 回复 | 直到 5 年前

Retr0_0x315 8 年前

你说的是 阴影DOM . 元素可以获得与之关联的新类型的节点。这种新节点称为 阴影根 . 具有与之关联的阴影根的元素称为 阴影主机 . 阴影主机的内容未呈现;将渲染阴影根的内容。有一个叫做 样式封装 .

SHADOW DOM

此外,我建议避免使用 :根目录 . 我知道医生说要用 :根目录 从技术上讲,我认为在文档级别这样做很好,但您使用的是一个框架,可能影子DOM内部存在冲突并导致错误。避免 :根目录 所有这些可能只是一个好习惯@PB4如果我完全错了,请纠正我。

以下是有关 Shadow DOM 并阅读有关角度样式组件的更多信息。希望有帮助。

推荐文章

Max Smaleha · 聚合物2事件

8 年前

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

9 年前

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

9 年前

Estus Flask · Angular 2原生视图封装

9 年前

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

10 年前

cbfranca · 聚合物中的嵌套模板

10 年前

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

11 年前

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

11 年前

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

11 年前

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

12 年前