Chrome и Firefox дает различные результаты на JavaScript файла импорта переменной CSS

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

тест .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> элемент, установите .innerHTML из <template> элемент template переменной; импорт <template> элемент .content использования .importNode(), Append импортированы в .contentshadowRoot из <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>