CSS 变量 :root vs :host

Question

刚开始做web开发(来自android)在我的元素中，我尝试分配变量，因为在许多教程中都提到了“:root”的帮助:

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

但这根本不起作用。将其更改为“:host”后它仍然有效 - 有人可以解释一下 :root 不工作背后的原因是什么吗？

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

Answer 1

你在谈论 Shadow DOM。元素可以获得与其关联的一种新型节点。这种新型节点称为影子根。具有关联影子根的元素称为影子主机。不呈现影子主机的内容；影子根的内容被渲染。有一种叫做样式封装的东西。

我还建议避免使用 :root。我知道文档说要使用 :root 并且从技术上讲，我认为在文档级别这样做很好，但是您使用的是框架，Shadow DOM 内部可能存在冲突并导致错误。一起避免 :root 可能只是养成一个好习惯。 @pb4now 如果我完全错了，请纠正我。

这里是关于 Shadow DOM 的更多信息并阅读有关 Angular 样式组件的更多信息。希望对您有所帮助。