📝 CSS-Tricks 241: The @property is magic

View this newsletter on the web.

[Robin]: I still haven’t found myself reaching for Web Components yet and I’m not sure why. I assume because most of my time is spent with either Static Site Generators or very large Single Page Applications written in React. But the idea makes a ton of sense to me, as Caleb Williams describes in An Introduction to Web Components:

The shadow DOM is an encapsulated version of the DOM. This allows authors to effectively isolate DOM fragments from one another, including anything that could be used as a CSS selector and the styles associated with them. Generally, any content inside of the document’s scope is referred to as the light DOM, and anything inside a shadow root is referred to as the shadow DOM.

Later Caleb writes that “the shadow DOM works sort of like an <iframe>” where you don’t have to worry about any of the styles within it conflicting with anything outside of it and vice versa. Or, to put it another way: browser-native encapsulation like CSS modules. But I’ve been thinking about this stuff because I really enjoyed this other piece by Richard MacManus about How Web Components Are Used at GitHub and Salesforce. For example, it’s interesting to hear that the reason why the front-end team at GitHub reached for web components (they now have more than 50!) is because they don’t use a JavaScript framework like React or Vue.

The GitHub team built components such as the tab-container element and it looks like there’s a great list called github-elements which captures most of them. I’ve been flipping through these and it seems like there’s a ton of stuff to learn here about building great Web Components.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s