chrome CSS var问题

最近在学自定义组件，遇到了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;

【热门文章】