November 4, 2024 – @hawkticehurst
Hot take: I think “regular” web components (the ones with Shadow DOM and friends) are a terrible solution for marketing website design systems.
It has always left a bad taste in my mouth when I run across a web component for a swimlane, banner, card, and so on. Why? Because these are components that (unless you’re doing something mighty fancy) should never require JavaScript as a dependency.
But, in the world of web components you are locked into JavaScript from the very start. To even register a web component with the browser you need JavaScript.
But what if… we didn’t do that?
HTML Web Components
I’ve spent a good chunk of the last year focused on marketing site design systems at work. A regular topic of discussion is the need to build marketing sites that are accessible to folks with lower powered devices and poor internet connections. How do you achieve that? In short, use less JavaScript and ideally build UI with progressive enhancement in mind.
There are many ways to achieve these goals, but the method I’ve been focused on is how an HTML Web Component archictecture might be applied to implement a marketing site design system.
As a quick reminder/intro, HTML Web Components is a method of building web components where you write HTML as you would normally and then wrap the parts you want to be interactive using a custom element.
For example, if you wanted to create a counter button it would look like this:
<counter-button>
<button>Count is <span>0</span></button>
</counter-button>
<style>
counter-button button {
/* Counter button styles */
}
</style>
<script>
class Counter extends HTMLElement {
// Counter button behavior
}
customElements.define("counter-button", Counter);
</script>
The markup in an HTML web component is parsed, rendered, and styled as normal HTML. That HTML will then be seamlessly hydrated once the JavaScript associated with the custom element tag is executed.
In contrast, the markup of a "regular" web component (that uses Shadow DOM) is dynamically generated at runtime using JavaScript – kind of like an SPA.
This component architecture is a really strong candidate for a marketing design system (and, as a bonus, avoids some of the big gotchas that come with regular web components).
- It is a perfect implementation of progressively enhanced UI
- It uses minimal and self-contained JavaScript — HTML Web Components can be thought of as islands
- You still get the power of custom element APIs to implement stuff like design system component variants
- The component markup is fully SSR-able
- The component markup can be styled like regular HTML
- Common accessibility practices can be applied without issue