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

测试.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>元件template可变.innerHTML;进口<template>使用.importNode()元件.content，追加导入到.content的shadowRoot元件<test-widget>

另外，代替对于:host在:root如果css预期结果是样式被应用到shadowRoothost;包括关闭正斜杠/.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>