index.html is utilizing a reusable footer component to display its footer, which has been placed in its own shadow DOM to prevent its CSS from changing other elements on the page.
This has, however, resulted in the footer being unable to render the social media icons brought in from the page's font-awesome link.

I've created indexWithoutShadowDOM.html for an easy image of what things should look like.

I can't shake the feeling that it would be redundant to simply place an font-awesome link into the component,
as that would result in rendering two links to the same page for the webpage that this component's being applied to.

I wonder if the question is: How do we link to an external CSS sheet on the webpage, and not on a reusable component in a shadow DOM, all while ensuring the shadow DOM can still get what it needs from that same external CSS link?

I worry that this question is just another way of wording "let the webpage end up with two links to the same sheet".

So that's why I think this is currently beyond my skills.
Any ideas?