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>

Lo ves,fa-search es una clase definida en el archivo css font-awesome, ¿cómo puedo diseñar el<i> ¿elemento?