CSS 根到主机
我正在开发一个现有的应用程序。
在此应用程序中，所有 css 变量都在伪类 :root 下的文件 variables.css 中声明，如下所示：
:root {
--nui-color-primary: #1979ff;
}
并且，对于特定组件（弹出窗口），我们是在另一个文件 popover.scss 中声明的变量：
:host {
--popover-content-color: var(--nui-color-primary);
}
.popover-inner-content {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
padding: unit(1.5) unit(0.5) unit(1.5) unit(1.5);
color: var(--popover-content-color);
}
但是 :host 似乎无法访问 :root变量，因为颜色对于我的示例来说不是好的颜色（黑色而不是蓝色）。
我对 Shadow DOM 不是很熟悉，而且我是这个项目的新手，所以我收回之前所做的事情。
知道如何调用主机上的根变量吗？
I'm working on an existing app.
In this app, all css variables are declared in a file variables.css under the pseudo-class :root like this :
:root {
--nui-color-primary: #1979ff;
}
And, for a particular component (a popover), we are variables declared like this in an other file popover.scss :
:host {
--popover-content-color: var(--nui-color-primary);
}
.popover-inner-content {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
padding: unit(1.5) unit(0.5) unit(1.5) unit(1.5);
color: var(--popover-content-color);
}
But the :host doesn't seems to have access to the :root variables, because the color isn't the good one for my example (black instead of blue).
I am not very familiar with the Shadow DOM and I'm new on this project so I take back what was done before.
Any idea of how I can call root variables on the host ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我对 Shadow DOM 的 CSS
:root变量也有类似的问题，但我的项目是解析 HTML 文件并将结果放入 Shadow DOM 元素。我的解决方案是将
:root中的变量复制到带有:host {}的新以你的例子来修改：
I have a similar problem about CSS
:rootvariables with Shadow DOM, but my project is to parse a HTML file and put the result to a Shadow DOM element.My solution is just copy the variables inside
:rootto a new<style>element with:host {}and put the<style>element to the<body>element inside the same DOM object.Take your example to modify: