No doubt, if you've been following web standards development for the last few years, you've come across Web Components. Some folks will continue to dunk on Web Components for the lack of HTML Imports support. But I want to talk about the power of the other bit, Custom Elements.

Progressive Enhancement

The first time I saw custom elements being used for progressive enhancement, I knew it was the future. Github had made time stamps into a custom elements called <time-elements>.

This solves a real problem. Servers and databases often store time data in Coordinated Universal Time (UTC). But 2020-04-28T15:49:05.202Z isn't exactly the most readable for humans. We're used to seeing 30 seconds ago or Just Now. Even if the server could reliably tell which timezone the user was in, that's a lot of unique rendering. If the JavaScript fails, the user gets a completely valid timestamp (albeit less readable).

Accessibility

"Robust" is the fourth principle in the Web Content Accessibility Guidelines (WCAG). It often gets relegated to an afterthought because so many developers obsess about JavaScript-heavy frameworks.

"Our users all have JS enabled." --JS dev bro

But custom elements allow for valid, semantic markup to become richer, more interactive when JS works. That's the true meaning of robust. "Works, even during failure." The pattern forces developers to focus on HTML and CSS first but sadly, they don't know it too well. Consider the latest "State of the Web" report.

For other areas of accessibility, Erik Kroes blogs about ING's Lion components, an open source web component library. Salesforce also wrote some good advice for web component accessibility.

Even Your Framework Gets It

Frameworks got on board with this concept years ago. The race to 100 on Custom Elements Everywhere proves it. By investing in custom element development, you're not just helping yourself to better knowledge of "the platform" and treating your users to a more robust site, you're reducing framework lock-in. If most of your look-and-feel exists in custom elements, moving to a different framework or upgraded version should be much easier.

But Shadow Dom Tho

Custom elements don't require being rendered in shadow. Web Components don't either. But that's a common assumption because you often see the conflation of features in web component and custom element demos. Shadow can be nice for tight control on styling, but it's not always great for dealing with global corporate style sheets.

With a little practice, you can even still use <slot> elements your custom elements compose over. But you may not even need that feature. I made a gist if you're interested in that sort of thing.

But if you choose shadow, slots are awesome. They even work inside SVGs! Just use code like this to lift the slotted content into the SVG and put any positioning or styling on the foreignobject:

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignobject><slot></slot></foreignobject>
</svg>

Learning, Isolation, Composition

Learning this stuff might seem hard at first, but you're going to love not needing a compiler, or webpack, or a ton of other developer tooling bloat while you learn. Just start hacking on some HTML, CSS, and JS and watch the magic in your browser.

When you build components like this, you're building them in isolation from each other and your "parent" app. This means that the components are far less likely to cause cascade failures when one of them fails. That's also more robust.

Isolated components also force developers to think about composition. Composition, not inheritance, often leads to higher levels of reusability. Both within your app and between projects. Imagine every component in your app not having dependencies, not relying on multiple megabytes of code you've never read and probably don't fully understand. Now debug that app. Easy, right?

Sure, you may need to compile something for production to ensure cross-browser support (I'm looking at you Safari), but the farther we get from IE11 support, the better this looks. Based on CanIUse and the sunsetting of IE11, I would expect any new project of a decent size to seriously consider a foundation built in custom elements.