极客观点
项目管理
HarmonyOS
最近在学自定义组件，遇到了chrome导入css变量问题,
HTML页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="js/webcomponents.min.js" ></script>
<script type="text/javascript" src="js/test.js" ></script>
</head>
<body>
<test-widget></test-widget>
</body>
</html>通过ES6创建CSS，JS代码如下：
(function(){
let template = `
<style>
@import url("css/test.css");
.test{
height: 100px;
width: 100px;
color: #fff;
background-color: var(--main-bg-color,red);
}
</style>
<div class="test1">test1</div>
<div class="test2">test2</div>
`;
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;
chrome
这不是 Shadow DOM 导入外部 CSS 变量的锅，你直接嵌入
test.css会发现也没有效果。问题在于:root选择器在 Shadow DOM 里没有定义，它不匹配 shadow root，也不匹配 shadow host，当然基于样式隔离的原则，更不会匹配文档根。把
:root改成:host选择器，就一切正常。