css变量：root vs：host

Question

只是在我的项目中从webdevelopment（来自android）开始，我试图分配变量，因为在许多教程中都提到了“：root”的帮助：

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

但这根本没有用。将其更改为“：host”后，它可以正常工作-有人可以解释一下：root不工作的原因是什么？

可能值得一提：我在自定义组件上使用了它（角度5），并且正在使用CoreUI（以防有些CSS出现）

Answer 1

您正在谈论Shadow DOM。元素可以获得与之关联的新型节点。这种新的节点称为影子根。具有与之关联的影子根的元素称为影子主机。影子主机的内容未渲染；而是渲染阴影根的内容。有一个叫做样式封装的东西。

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

这是有关Shadow DOM的更多信息，以及有关Angular Style Components 的更多信息。希望能帮助到你。