Como permitir que o CSS importado tenha efeitos nos elementos do shadow dom?

Diga se eu quero criar um elemento personalizado usando o sombra dom. Alguns elementos no modelo têm nomes de classe especificados no arquivo css vinculado. Agora, quero deixar que as regras css tenham efeitos sobre os elementos. Mas não consigo isso por causa dos limites do estilo shadow 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>

Entende,fa-search é uma classe definida no arquivo css de fonte impressionante, como posso estilizar o<i> elemento?