# ::part and ::theme, an ::explainer

DevFeed: [::part and ::theme, an ::explainer](<https://devfeed.tech/articles/part-and-theme-an-explainer-35534.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/part-theme-explainer/>)

Author: Monica Dinculescu

Published: 2017-12-18T00:00:00Z

Content type: tutorial

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [Web Components](<https://devfeed.tech/topics/web-components.md>), [CSS](<https://devfeed.tech/topics/css.md>), [selectors](<https://devfeed.tech/topics/selectors.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [web-standards](<https://devfeed.tech/topics/web-standards.md>)

Tags: [components](<https://devfeed.tech/tags/components.md>), [css](<https://devfeed.tech/tags/css.md>), [deprecated](<https://devfeed.tech/tags/deprecated.md>), [explainer](<https://devfeed.tech/tags/explainer.md>), [polyfill](<https://devfeed.tech/tags/polyfill.md>), [properties](<https://devfeed.tech/tags/properties.md>), [selectors](<https://devfeed.tech/tags/selectors.md>), [syntax](<https://devfeed.tech/tags/syntax.md>)

## AI overview

This explainer reviews proposals for styling and theming Shadow DOM components, including shadow-piercing selectors, custom CSS properties, and the proposed ::part and ::theme approaches. It notes that the relevant specification was not yet final and that no reliable polyfill was available at the time.

## Source excerpt

Updated May 18, 2020 (get it? :: ? I made a funny) Shadow DOM is a spec that gives you DOM and style encapsulation. This is great for reusable web components, as it reduces the ability of these components' styles getting accidentally stomped over (the old "I have a class called "button" and you have a class called "button", now we both look busted" problem), but it adds a barrier for styling and theming these components deliberately. Since a lot has changed since the last time I talked about styling the Shadow DOM, I wanted to give you a quick update about what new specs were in the works! Please note that this spec isn't quite final, which means that a) the syntax and capabilities will likely change and b) there isn't a polyfill you can use for realsies. --- Ok, so. When talking about styling a component, there are usually two different problems you might want to solve: 💇 Styling: I am using a third-party <fancy-button> element on my site and I want this one to be blue 🎨 Theming: I am using many third-party elements on my site, and some of them have a <fancy-button>; I want all the <fancy-button>s to be blue. Here's almost everything I know on this topic. A trip through time There have been several previous attempts at solving this, some more successful than others. If you've read my last post about this, you're already caught up. If you haven't, here's the deets: First came :shadow and /deep/ (which have since been deprecated, and removed as of Chrome 60). These were shadow-piercing selectors that allowed you to target any node in an element's Shadow DOM. Apart from being terribad for performance, they also required the user of an element to be intimately familiar with some random element's implementation, which was unlikely and lead to them just breaking the whole element by accident Custom properties allow you to create custom CSS properties that can be used throughout an app. In particular, they pierce the shadow boundary, which means they can be used for styli