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>元素，将<template>元素的.innerHTML设置为template变量； 使用.importNode()导入<template>元素.content ，将导入的.content附加到<test-widget>元素的shadowRoot

另外，如果预期结果是要将样式应用到shadowRoot host ，请在css处用:host替换为:root ； 包括关闭正斜杠/ .test2元素<div class="test2">test2</div> ，其中Question处的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>