[Go Make Things] Styling Web Component shadow DOM elements with an inline link element

Saturday, November 9, 2024

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.

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Ad/iklan :