Chrome 和 Firefox 对 CSS 变量的 JavaScript 文件导入给出不同的结果

Question

Chrome 51 结果

火狐搜索结果

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 追加到shadowRoot 的<test-widget> 元素

此外，如果预期结果是将样式应用于shadowRoot host，则将:root 替换为css 处的: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>