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>