Links on Web Components

What teams are actually shipping

GitHub's use of Web Components is not a recent experiment. Kristján Oddsson walks through the company's adoption, which dates back to a <relative-time> component released in 2014, and has since grown into a set of open source components. They are visible in the page source of the logged-in homepage — searching it yields seven custom elements — and are simple enough to use in a Codepen.

GitLab arrived at the same technology from a different direction. Tyler Williams describes using Shadow DOM encapsulation to insulate a component from an older CSS system and resolve design system conflicts.

Jason Grigsby, writing from client work, frames the integration benefit in a way worth quoting closely: Web Components don't make integration fast or easy, they make integration fast and easy.

Styling inside and out

Max Böck notes that the :host of a Web Component can serve as the @container for container queries — an arrangement worth treating as the default way to write components.

Jim Nielsen's post on Shadow DOM and the unofficial styling API extends a point raised on ShopTalk: the DOM is the styling API, and it is self-documenting in its own way.

As an author, you have to spend time and effort thinking about, architecting, and then documenting a styling API for your component. And as a consumer, you have to read, understand, and implement that API.

That burden on both sides of the boundary is an argument for letting outside CSS reach into the Shadow DOM in an unencumbered way.

Tooling layers above the platform

Native Web Components were arguably never intended to be consumed raw; the idea is that they sit low enough for tooling to build on top. Renderers such as lit-html and htm compete at that layer. Above them come frameworks like FicusJS, which adds state, methods and events.

Practical entry points matter as much as the platform. Awesome Standalones, Dave's list, is the sort of resource that gets developers experimenting with components as genuinely useful building blocks.

Two years ago, hold true: