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

Question

铬 51 结果

火狐结果

测试.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);
})();

测试.css

:root{
    --main-bg-color: blue;
}
.test2{
    background-color: green;
    height: 100px;
    width: 100px;
    color: #fff;
} 

测试.html

<test-widget></test-widget>

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

Answer 1

template变量不是<template>元素。

您可以创建一个<template>元素，一组.innerHTML元素<template>到template变量；使用导入<template>元素，追加导入的元素.content.importNode().contentshadowRoot<test-widget>

此外，如果预期结果是要应用于样式，则替换:host为; 包括关闭正斜杠 元素，在问题处缺少。虽然不完全确定实际的问题是什么？:rootcssshadowRoot 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>