This content originally appeared on Go Make Things and was authored by Go Make Things
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.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-11-08T14:30:00+00:00) Styling Web Component shadow DOM elements with an inline link element. Retrieved from https://www.scien.cx/2024/11/08/styling-web-component-shadow-dom-elements-with-an-inline-link-element/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.