Styling Web Component shadow DOM elements with an inline link element
Picking up on this week’s articles on why styling the shadow DOM sucks, today I wanted to talk about using an inline <link> element.
Earlier this week, I shared an approach using an inline <style> element. My buddy Scott Jehl pointed out that you can also use a <link> and point to an external stylesheet.
// Inject the HTML into the shadow DOM
this.root.innerHTML =
`<link rel="stylesheet" type="text/css" href="/path/to/buttons.css">
<button>Clicked ${this.count} Times</button>`;
This let’s you avoid repeating the same CSS in a global stylesheet and your inline code.
It probably also works best if you have a modularized CSS setup.