Importing font awesome into the shadow dom

JavaScript
1

I have been following this reusable html components tutorial from freecodecamp and learned how to implement a header and footer using the shadow dom. In the end there is an explanation about how to import a font awesome link. Since these days font awesome works with a script tag to import your personal fa kit the method as described in the tutorial is sort of obsolete.
This is the script tag I would like to import into the shadow dom:<script src="https://kit.fontawesome.com/mypersonelkit.js" crossorigin="anonymous"></script>
So my question is: Is it also possible to import a javascript script tag url into the shadow dom and if possible how to implement that? Anyone?

2

You can load the script element the same way you load the style element.

The problem is the FA script actually loads style elements into the head so you have to get those as well and they do not get added to the DOM instantly.

Not sure what the best way of dealing with it is but a setInterval does work (although it’s likely not super reliable).

connectedCallback code 
connectedCallback() {
  const fontAwesomeScript = document.querySelector(
    'script[src*="fontawesome"]'
  );

  const id = setInterval(() => {
    console.log('setInterval');
    const fontAwesomeFont = document.querySelector('#fa-v5-font-face');
    const fontAwesomeMain = document.querySelector('#fa-main');
    if (fontAwesomeScript && fontAwesomeFont && fontAwesomeMain) {
      shadowRoot.appendChild(fontAwesomeScript.cloneNode());
      shadowRoot.appendChild(fontAwesomeFont.cloneNode('deep'));
      shadowRoot.appendChild(fontAwesomeMain.cloneNode('deep'));
      clearInterval(id);
    }
  }, 200);

  const shadowRoot = this.attachShadow({ mode: 'closed' });

  shadowRoot.appendChild(footerTemplate.content);
}
3

Thanks you very much for your useful comment, I really appreciate that. :raised_hands: That actually brought back the font awesome icons I created. I have been trying to wrap my head around working with the shadow dom and it’s a complex matter. I was already looking for an alternative to implement web components using a framework like django or react, but this has been incredibly helpful. :sweat_smile:

4

If you want to use web components you might want to check out some of the libraries

https://project-awesome.org/mateusortiz/webcomponents-the-right-way

Just as an aside, you do not need to use the FA script. You can still use a CSS file. I know they push the kit on their website but if you just search for fontawesome CDN you can get links to the CSS files.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.