最近在学自定义组件，遇到了chrome导入css变量问题,
HTML页面代码：
0
479
test
通过ES6创建CSS，JS代码如下：
(function(){
let template = `
test1
test2
`;
class TestWidget extends HTMLElement{
createdCallback(){
this.createShadowRoot().innerHTML = template;
};
}
document.registerElement('test-widget',TestWidget);
})();导入的test.css：
:root{
--main-bg-color: blue;
}
.test2{
background-color: green;
height: 100px;
width: 100px;
color: #fff;
} chrome版本51，按理说应该显示的是blue,但是chrome显示red，
如果去掉默认red则默认父元素（就没颜色差别），这是@import导入的问题导致var变量出错吗？
chrome效果图：
firefox没问题，效果图：
忘记firefox不支持shadow DOM，所以效果图没对比性，但是chrome js里面还是不能导入外部css variable;
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...