title: Why doesn't Font Awesome work in my Shadow DOM?
body: <p><a href="https://fontawesome.com/start" rel="noreferrer">Font Awesome</a> is not working in my shadow DOM since I have the following in it to prevent styles from leaking in and out:</p>
  
  <pre><code>:host {
      all: initial; /* 1st rule so subsequent properties are reset. */
      display: block;
      contain: content; /* Boom. CSS containment FTW. */
  }
  </code></pre>
  
  <p>I'm able to use other stylesheets by just inlining them within the <code>:host</code> property, but that doesn't work with Font Awesome since it uses relative paths in its stylesheet.</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/35858494/how-to-let-imported-css-have-effects-on-elements-in-the-shadow-dom">this post</a> and tried it with the scoped CSS I implement, but the icons show as squares, as can be seen in <a href="https://codepen.io/anon/pen/BMwdqE" rel="noreferrer">my example</a>.</p>