[Go Make Things] Styling Web Component elements in the shadow DOM with parts

By rahmat hidayat

Thursday, November 14, 2024

​ For the last week, we've been looking at why styling elements in the shadow DOM sucks so bad, and what to do about it. So far, we've looked at using inline styles, external stylesheets, and CSS variables. Today, let's talk about parts! Our example element Just to recap, we have a <count-up> element, like this… <count-up></count-up> Which, when the Web Component JavaScript loads, renders HTML like this… <count-up> #shadow-root (closed) <button>Clicked 0 Times</button> </count-up> And it's styled using inline CSS and CSS variables like this… // Inject the HTML into the shadow DOM this.root.innerHTML = `<style> button { background-color: var(--bg-color, rebeccapurple); border: var(--border, 0); border-radius: var(--border-radius, 0.25em); color: var(--color, white); font-family: var(--font, 'PT Serif', sans-serif); font-size: var(--font-size, 1.2em); padding: var(--padding, 0.25em 0.5em); } </style> <button>Clicked ${this.count} Times</button>`; This can be a great approach, but it does require you to specify CSS variables for every aspect of each element that can by styled. Let's look at another way you can provide external access to style shadow DOM elements that's a bit more flexible. The [part] attribute The [part] attribute on web component elements in the Shadow DOM acts like a class that users can hook into to style elements in the Shadow DOM. Here, I've given the button a [part] attribute with a value of btn. // Inject the HTML into the shadow DOM this.root.innerHTML = `<style> button { background-color: var(--bg-color, rebeccapurple); border: var(--border, 0); border-radius: var(--border-radius, 0.25em); color: var(--color, white); font-family: var(--font, 'PT Serif', sans-serif); font-size: var(--font-size, 1.2em); padding: var(--padding, 0.25em 0.5em); } </style> <button part="btn">Clicked ${this.count} Times</button>`; The [part] attribute can now be targeted from stylesheets in the main DOM using the ::part() pseudo-element. The ::part() pseudo-element To target a specific [part], pass its value into the ::part() pseudo-element in your CSS. For example, to style the button, I would use ::part(btn) on the count-up element. You can target elements with more specificity if desired to uniquely style different components. count-up::part(btn) { background-color: #0088cc; border-radius: 0; } count-up[start-value="42"]::part(btn) { background-color: azure; color: #272727; border-radius: 1em; } This approach gives developers the ability to style all of the properties on a Shadow DOM element, not just the ones that you've assigned CSS variables for. However, it also means that developers can break your code in unexpected ways. In this example, the <button> element is hidden, and will never be displayed in the UI. count-up::part(btn) { display: none; } Personally, I prefer to give developers more flexibility, and trust them not to break the code, but your mileage may vary. 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+