Why doesn't Font Awesome work in my Shadow DOM?

Question

Font Awesome is not working in my shadow DOM since I have the following in it to prevent styles from leaking in and out:

:host {
    all: initial; /* 1st rul         


        

Answer 1

One thing I have noticed is that if the page does not load the CSS file then the shadowDOM won't load it either.

I really think that the only problem us that if the font is not defined on the page that it will not work in the component since the rest of the CSS seems to properly apply to the shadowDOM elements.

This example shows just the shadowDOM trying to load the CSS and it does not work:

let template = `



  
DreamLine
  

    

      
Tour
      
Blog
      
Contact
      
Error
      
 Search
    
  

`;

class MyEl extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'}).innerHTML = template;
  }
}

customElements.define("blog-header", MyEl);

And this example shows both the page and the shadowDOM loading it and it works:

let template = `


  
DreamLine
  

    

      
Tour
      
Blog
      
Contact
      
Error
      
 Search
    
  

`;

class MyEl extends HTMLElement {
  connectedCallback() {
    const styles = document.querySelector('link[href*="fontawesome"]');
    this.attachShadow({mode: 'open'}).innerHTML = template;
    if (styles) {
      this.shadowRoot.appendChild(styles.cloneNode());
    }
  }
}

customElements.define("blog-header", MyEl);

The code I like to use looks for the tag I want in the body and then uses a clone of that tag inside the shadowDOM. This way my component is not out of sync. Yes, this can cause problems if the component was not expecting a change in the CSS but I find it works well for my projects.