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 。元素可以获得与它们相关联的新节点。这种新节点称为影子根。具有与之关联的影子根的元素称为影子主机。阴影主机的内容未呈现;而是渲染阴影根的内容。这个叫做 Style Encapsulation 的东西。

另外我建议避免使用：root 。我知道文档说要使用：root ，从技术上讲，我认为在文档级别做得很好，但是你使用的是框架，可能是Shadow DOM内部存在冲突，导致错误。避免：root 一起成为一个很好的习惯。 @ pb4now纠正我，如果我对这些事情完全错了。

这里有关于Shadow DOM的更多信息，请阅读有关Angular Style Components的更多信息。希望它有所帮助。