Chrome und Firefox geben unterschiedliche Ergebnisse auf JavaScript-Datei-Import von CSS Variable

Question

Chrome 51 Ergebnisse

Firefox führt

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> 

Warum sind die Ergebnisse nicht gleich in zwei verschiedenen Browsern?

Answer 1

template Variable ist kein <template> Element.

Sie können ein <template> Element erstellen, .innerHTML von <template> Element auf template Variable festlegen; import <template> Element .content.importNode() Verwendung .content zu shadowRoot von <test-widget> Elemente

Auch substituiert :host für :root bei css importierten Append erwartetes Ergebnis ist für Art shadowRoothost angewandt werden; Schließen schließen Schrägstrich /.test2 Element <div class="test2">test2</div>, wo bei js bei Frage fehlt. Obwohl nicht ganz sicher, was die eigentliche Frage ist?

(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>