刚开始做web开发(来自android) 在我的元素中,我尝试分配变量,因为在许多教程中都提到了“:root”的帮助:
:root {
--accentColor: #20a8d8;
--primary: #96a1a5;
--secondary: #415a72;
--bgColorrr:#1e2e38;
}
但这根本不起作用。 将其更改为“:host”后它仍然有效 - 有人可以解释一下 :root 不工作背后的原因是什么吗?
可能值得一提:我在我的自定义组件(Angular 5)上使用了它,并且我正在使用 CoreUI(以防可能影响某些 CSS)
最佳答案
你在谈论 Shadow DOM。元素可以获得与其关联的一种新型节点。这种新型节点称为影子根。具有关联影子根的元素称为影子主机。不呈现影子主机的内容;影子根的内容被渲染。有一种叫做样式封装的东西。
我还建议避免使用 :root。我知道文档说要使用 :root 并且从技术上讲,我认为在文档级别这样做很好,但是您使用的是框架,Shadow DOM 内部可能存在冲突并导致错误。一起避免 :root 可能只是养成一个好习惯。 @pb4now 如果我完全错了,请纠正我。
这里是关于 Shadow DOM 的更多信息并阅读有关 Angular 样式组件的更多信息。希望对您有所帮助。
关于CSS 变量 :root vs :host,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48380267/