如何让导入的CSS字体/图标对阴影dom中的元素产生影响? [英] How to let imported css font / icons have effects on elements in the shadow dom?
问题描述
说,如果我想使用shadow dom创建自定义元素.模板中的某些元素具有在链接的CSS文件中指定的类名称.现在,我想让CSS规则对元素产生影响.但是由于阴影dom样式的边界,我无法实现这一目标.
Say if I want to create a custom element using shadow dom. Some elements in the template have class names specified in the linked css file. Now I want to let the css rules have effects on the elements. But I can't achieve that because of the shadow dom style boundary.
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<template id="blog-header">
<header>
<h1>DreamLine</h1>
<nav>
<ul>
<li><a href="#0">Tour</a></li>
<li><a href="#0">Blog</a></li>
<li><a href="#0">Contact</a></li>
<li><a href="#0">Error</a></li>
<li><a href="#0"><i class="fa fa-search"></i>Search</a></li>
</ul>
</nav>
</header>
</template>
<script type="text/javascript">
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function () {
var t = importDoc.querySelector("#blog-header");
var clone = document.importNode(t.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
document.registerElement("blog-header", {
prototype: proto
});
</script>
您看到,fa-search
是在字体超赞的CSS文件中定义的类,如何设置<i>
元素的样式?
You see, fa-search
is a class defined in the font-awesome css file, how can I style the <i>
element?
推荐答案
要在Shadow DOM中使用导入的字体(例如 FontAwesome ),您应该:
To use an imported font (e.g., FontAwesome) in a Shadow DOM, you should:
1°声明字体
首先,在主文档中包含<link rel="stylesheet">
元素.它将声明一个@font-face
CSS规则,该规则将使字体可用于文档中的所有文本.
First, include the <link rel="stylesheet">
element in the main document. It will declare a @font-face
CSS rule that will make the font available for all the text in the document.
2°导入样式表
然后,在<template>
节点中使用@import url
CSS规则导入同一文件,以使.fa-*
类选择器可从Shadow DOM中使用:
Then, import the same file with an @import url
CSS rule in the <template>
node to make the .fa-*
classes selectors available from the Shadow DOM :
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<template id="blog-header">
<style>
@import url("https://use.fontawesome.com/releases/v5.7.1/css/all.css")
</style>
<header>
<h1>DreamLine</h1>
//...
</header>
</template>
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var t = importDoc.querySelector("#blog-header");
var clone = document.importNode(t.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
document.registerElement("blog-header", {prototype: proto});
/*
@font-face {
font-family: "FontAwesome";
src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome-webfont.woff2?v=4.5.0") format('woff2');
}
*/
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<template id="blog-header">
<style>
@import url("https://use.fontawesome.com/releases/v5.7.1/css/all.css")
</style>
<header>
<h1>DreamLine</h1>
<nav>
<ul>
<li><a href="#0">Tour</a></li>
<li><a href="#0">Blog</a></li>
<li><a href="#0">Contact</a></li>
<li><a href="#0">Error</a></li>
<li><a href="#0"><i class="fa fa-search"></i>Search</a></li>
</ul>
</nav>
</header>
</template>
<blog-header></blog-header>
更新2019
现在,您可以在Shadow DOM中使用<link rel="stylesheet">
代替@import url()
.
Now you can use <link rel="stylesheet">
instead of @import url()
inside a Shadow DOM.
这篇关于如何让导入的CSS字体/图标对阴影dom中的元素产生影响?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!