Sagen Sie, wenn ich mit shadow dom ein benutzerdefiniertes Element erstellen möchte. Einige Elemente in der Vorlage haben Klassennamen, die in der verknüpften CSS-Datei angegeben sind. Jetzt möchte ich die CSS-Regeln auf die Elemente auswirken lassen. Aber das kann ich wegen der Schatten-Dom-Stil-Grenze nicht erreichen.

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

Sie sehen,fa-search ist eine Klasse, die in der CSS-Datei font-awesome definiert ist. Wie kann ich das @ formatiere<i> Element