How to let imported css font / icons have effects on elements in the shadow dom?

by

To use an imported font (e.g., FontAwesome) in a Shadow DOM, you should:

1° Declare the Font

First, include the <link rel="stylesheet"> element in the main document. It will declare a @font-face CSS rule that will make the font available for all the text in the document.

2° Import the Stylesheet

Then, import the same file with an @import url CSS rule in the <template> node to make the .fa-* classes selectors available from the Shadow DOM :

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

Update 2019

Now you can use <link rel="stylesheet"> instead of @import url() inside a Shadow DOM.

More Related Contents:

  1. Nested element (web component) can’t get its template
  2. Use of Template with HTML Custom Elements
  3. How to get element in user-agent shadow root with JavaScript?
  4. Is it possible to access Shadow DOM elements through the parent document?
  5. How to create new instance of an extended class of custom elements
  6. Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries
  7. Override styles in a shadow-root element
  8. How to communicate between Web Components (native UI)?
  9. ::slotted CSS selector for nested children in shadowDOM slot
  10. How to automate shadow DOM elements using selenium?
  11. How to implement a dynamic form with controlled components in ReactJS?
  12. How to separate web components to individual files and load them?
  13. Accessing Shadow DOM tree with Selenium
  14. Accessing elements in the shadow DOM
  15. Share style across web components “of the same type”
  16. Polymer share styles across elements
  17. Switching to the new function writing format
  18. $(document).ready equivalent without jQuery
  19. Do you need text/javascript specified in your tags?
  20. How to get background image URL of an element using JavaScript?
  21. javascript – How to make this code work? [duplicate]
  22. How to pass javascript object from one page to other
  23. jQuery – Create hidden form element on the fly
  24. Promises, pass additional parameters to then chain
  25. jQuery: checking if the value of a field is null (empty)
  26. IE’s toLocaleString has strange characters in results
  27. GmailApp – Add label to specific message, not the thread
  28. Auto Mobile Site Redirect
  29. Why will ES6 WeakMap’s not be enumerable?
  30. mozilla’s bind function question

Leave a Comment