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

FWIW I created a helper method to create a link for font-awesome at the parent page level. Not sure if this is in violation of any custom-elements/Web Components standards but I'll go ahead and post here in hopes that I'll be corrected :) It works for my use case w/ internal web applications for now though.

export const addFontAwesomeStyles = () => {
    injectStylesheet("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
    injectStylesheet("https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css");
}

export const injectStylesheet = (href: string) => {
    const links = document.head.querySelectorAll("link");

    // Already been injected
    for(let l in links)
        if(links[l].href == href) return;

    const link = document.createElement('link');
    link.rel = "stylesheet";
    link.href = href;
    document.head.appendChild(link)
}

Then in your StencilJS component's construtor you can use it like so:

//...
constructor() {
    addFontAwesomeStyles();
}