[英]Chrome and Firefox giving different results on JavaScript file import of CSS variable
Chrome 51 results Chrome 51结果
Firefox results Firefox结果
test.js 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 test.css
:root{
--main-bg-color: blue;
}
.test2{
background-color: green;
height: 100px;
width: 100px;
color: #fff;
}
test.html test.html
<test-widget></test-widget>
Why are the results not the same in two different browsers? 为什么在两个不同的浏览器中结果不一样?
template
variable is not a <template>
element. template
变量不是<template>
元素。
You can create a <template>
element, set .innerHTML
of <template>
element to template
variable; 您可以创建一个
<template>
元素,将<template>
元素的.innerHTML
设置为template
变量; import <template>
element .content
using .importNode()
, append imported .content
to shadowRoot
of <test-widget>
element 使用
.importNode()
导入<template>
元素.content
,将导入的.content
附加到<test-widget>
元素的shadowRoot
Also, substitute :host
for :root
at css
if expected result is for style to be applied to shadowRoot
host
; 另外,如果预期结果是要将样式应用到
shadowRoot
host
,请在css
处用:host
替换为:root
; include closing forward slash /
.test2
element <div class="test2">test2</div>
, where missing at js
at Question. 包括关闭正斜杠
/
.test2
元素<div class="test2">test2</div>
,其中Question处的js
中缺少。 Though not entirely certain what actual Question is? 虽然不能完全确定什么是实际的问题?
(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.