css 特异性和 css 聚合物中的变异
css specificity and css vars in polymer
我正在使用聚合物,我认为这是一个,但我不完全确定。
在我的主文档中我有这个:
<style is="custom-style">
:root {
--child-element-bg: #000;
--child-element-mixin: {
border: 10px solid #f30;
};
}
</style>
<parent-element>
<child-element></child-element>
</parent-element>
在我的子元素里面我有这个样式块
<style>
:host {
background-color: var(--child-element-bg, --some-other-default);
@apply(--child-element-mixin);
}
</style>
一切正常。但是在我的父元素中我有:
<style>
:host {
--child-element-bg: #f30;
--child-element-mixin: {
border: 5px solid #000;
};
}
</style>
我的子元素获得 5px 实体 #000,但不是 #f30 背景颜色。
我做错了什么吗?这是一个已知错误吗?
这不是错误。这就是 Polymer 实现其 css 变量的方式。
我正在使用聚合物,我认为这是一个,但我不完全确定。
在我的主文档中我有这个:
<style is="custom-style">
:root {
--child-element-bg: #000;
--child-element-mixin: {
border: 10px solid #f30;
};
}
</style>
<parent-element>
<child-element></child-element>
</parent-element>
在我的子元素里面我有这个样式块
<style>
:host {
background-color: var(--child-element-bg, --some-other-default);
@apply(--child-element-mixin);
}
</style>
一切正常。但是在我的父元素中我有:
<style>
:host {
--child-element-bg: #f30;
--child-element-mixin: {
border: 5px solid #000;
};
}
</style>
我的子元素获得 5px 实体 #000,但不是 #f30 背景颜色。
我做错了什么吗?这是一个已知错误吗?
这不是错误。这就是 Polymer 实现其 css 变量的方式。