[英]css variables :root vs :host
Just starting with webdevelopment (coming from android) in my project I tried to assign variables as in many tutorial is mentions with help of ":root" :刚开始在我的项目中的 webdevelopment(来自 android)我试图分配变量,因为在许多教程中提到了 ":root" 的帮助:
:root {
--accentColor: #20a8d8;
--primary: #96a1a5;
--secondary: #415a72;
--bgColorrr:#1e2e38;
}
But that did not work at all.但这根本不起作用。 After changing it to ":host" it work though - can someone please explain what is the reason behind :root not working?
将其更改为“:host”后,它可以工作 - 有人可以解释 :root 不工作的原因是什么吗?
May be worth mention: I used that on my custom component (Angular 5) and I'm using CoreUI (in case that may effect some CSS)可能值得一提:我在我的自定义组件(Angular 5)上使用了它,并且我正在使用 CoreUI(以防可能影响某些 CSS)
You're talking about Shadow DOM .你说的是Shadow DOM 。 Elements can get a new kind of node associated with them.
元素可以获得一种新的与它们相关联的节点。 This new kind of node is called a shadow root .
这种新的节点称为影子根。 An element that has a shadow root associated with it is called a shadow host .
具有与之关联的影子根的元素称为影子主机。 The content of a shadow host isn't rendered;
不呈现影子主机的内容; the content of the shadow root is rendered instead.
阴影根的内容被渲染。 There's this thing called Style Encapsulation .
有一种叫做Style Encapsulation的东西。
Also I would suggest avoiding the use of :root .另外我建议避免使用:root 。 I know the docs say to use :root and technically I think that's fine to do at the document level, but you are using a framework maybe there is a conflict inside of the Shadow DOM and cause a bug.
我知道文档说要使用:root并且从技术上讲,我认为在文档级别这样做很好,但是您使用的框架可能是 Shadow DOM 内部存在冲突并导致错误。 Avoiding :root all together might just be a good habit to get into.
避免:root一起使用可能只是一个好习惯。 @pb4now correct me if I'm totally wrong about stuff.
@pb4now 如果我对某些事情完全错误,请纠正我。
Here's more info about Shadow DOM and read more about Angular Style Components.这里有更多关于Shadow DOM的信息,并阅读更多关于 Angular 样式组件的信息。 Hope it helps.
希望它有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.