Как сделать так, чтобы импортированные css влияли на элементы в тени?
Скажи, если я хочу создать пользовательский элемент, используя теневой дом. Некоторые элементы в шаблоне имеют имена классов, указанные в связанном файле CSS. Теперь я хочу, чтобы правила CSS влияли на элементы. Но я не могу добиться этого из-за границы стиля теневого дома.
<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 это класс, определенный в файле font-awesome css, как я могу<i> элемент?