javascript - ¿Cómo dejar que los CSS importados tengan efectos en los elementos de la sombra dom?

web-component shadow-dom

Question

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

Answer 1

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.