Chrome和Firefox在CSS变量的JavaScript文件导入方面给出了不同的结果

Question

Chrome 51结果

Firefox结果

test.js

(function(){
    let template = `
    <style>
        @import url("css/test.css");
        .test1{
            height: 100px;
            width: 100px;
            color: #fff;
            background-color: var(--main-bg-color,red);
        }
    </style>
    <div class="test1">test</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;
} 

的test.html

<test-widget></test-widget>

为什么两个不同浏览器的结果不一样？

Answer 1

template变量不是<template>元素。

您可以创建<template>元素，将.innerHTML元素的<template>设置为template变量;使用<template>导入.content元素.importNode()，将导入的.content追加到shadowRoot元素的<test-widget>

另外，如果预期结果适用于:host :root，则将css替换为shadowRoot host;包括结束正斜杠/ .test2元素<div class="test2">test2</div>，其中js缺少问题。虽然不完全确定实际问题是什么？

(function(){
    let template = `
    <style>
        /*@import url("css/test.css");*/
        :host {
          --main-bg-color: blue;
        }
        .test2 {
            background-color: green;
            height: 100px;
            width: 100px;
            color: #fff;
        } 
        .test {
            height: 100px;
            width: 100px;
            color: #fff;
            background-color: var(--main-bg-color,red);
        }
    </style>
    <div class="test">test</div>
    <div class="test1">test</div>
    <div class="test2">test2</div>
    `;

    class TestWidget extends HTMLElement{
        createdCallback(){
        var shadow = this.createShadowRoot();
        var temp = document.createElement("template");
        temp.innerHTML = template;
        var shadowContent = document.importNode(temp.content, true);
        shadow.appendChild(shadowContent);
            
        };
    }
    document.registerElement("test-widget",TestWidget);
})();

<test-widget></test-widget>