[Go Make Things] Styling web components

By rahmat hidayat

Thursday, October 17, 2024

​ One of the more common questions I get around Web Components is how to style them. The Shadow DOM is a big part of why Web Components are often hard to style. Because it encapsulates your HTML from the main DOM, your nested HTML doesn't inherit your global CSS. When you have a robust design system, this makes everything a lot harder. So much so that I consider the Shadow DOM an anti-pattern in most situations. The trick to stress-free styling of Web Components is to keep all of your HTML in the light DOM. Either nest it in your custom element and progressively enhance it… <show-hide> <button trigger>Show More</button> <div content> Now you see me, now you don't! </div> </show-hide> Or render it into the light DOM instead of the shadow DOM… customElements.define('say-hi', class extends HTMLElement { /** * Create a new instance */ constructor () { super(); this.innerHTML = `<p>Hey there, ${this.getAttribute('first-name')}!</p>`; } // ... }); Your HTML will inherit your global CSS automatically. If you need to add some custom styles or overrides, you can use the custom HTML element to add a bit more specificity. show-hide button { /* Override the default button styles... */ } /* Make the paragraph bigger */ say-hi p { font-size: 1.5rem; } In a future article, I'll talk about when the shadow DOM actually makes sense. 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

Share :

Facebook Twitter Google+