javascript - ¿Cómo dejar que los CSS importados tengan efectos en los elementos de la sombra dom?
web-component shadow-dom (1)
Decir si quiero crear un elemento personalizado usando shadow dom. Algunos elementos de la plantilla tienen nombres de clase especificados en el archivo css vinculado. Ahora quiero dejar que las reglas CSS tengan efectos en los elementos. Pero no puedo lograr eso debido a la frontera del estilo dom dom.
<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>
Verá,
fa-search
es una clase definida en el archivo css font-awesome, ¿cómo puedo diseñar el elemento
<i>
?
Para usar una fuente importada (p. Ej., FontAwesome ) en un Shadow DOM, debe:
1 ° Declarar la fuente
Primero, incluya el elemento
<link rel="stylesheet">
en el documento principal.
Declarará una regla CSS
@font-face
que hará que la fuente esté disponible para todo el texto del documento.
2 ° Importar la hoja de estilo
Luego, importe el mismo archivo con una regla CSS
@import url
en el nodo
<template>
para que los selectores de clases
.fa-*
disponibles desde el DOM de la sombra:
<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>
Actualización 2019
Ahora puede usar
<link rel="stylesheet">
lugar de
@import url()
dentro de un Shadow DOM.