Do web components make your design system framework-agnostic?

I recently read a blog post claiming that web components can make your design system framework agnostic.

But this is down to the false dichotomy between:

1. Those that love React (or the current popular thing)
2. Those that hate React (or the current popular thing)

React is probably a bad choice for your design system. But that’s not an argument against libraries or frameworks.

That’s an argument for choosing something better than React.

Either way, the claim that web components give you a framework agnostic design system is misleading.

Here’s why:

Reason #1: Components aren’t just about the JavaScript layer

For example, here’s an accordion component:

{{ accordion({ items }) }}

This component:

1. allows data (items in this case) to be injected from a database/API
2. abstracts the HTML away to make sure it’s accessible, semantic, and reusable etc
3. uses HTML classes that are tied to CSS in order to style it
4. uses JavaScript as an enhancement to expand and collapse the panels

For this to work you need a templating language which is usually tied to a stack:

• Nunjucks on Node
• ERB on Rails
• Jinja on Django

Web components only handle (4).

And that’s no different from writing your own JavaScript class.

Reason #2: JavaScript orchestration is still needed

Even if you use web components to enhance your HTML, you may still need JavaScript to:

1. Fetch data with AJAX and update the UI
2. Coordinate events between components

You either use a library for these things, or you write it yourself.

Don’t get me wrong:

It’s still valuable to abstract HTML, CSS and JS for reuse. And if that’s all you can do, fine.

But that’s not a framework agnostic design system.

It puts significant effort on the consuming team and it’s fragile because they are far more likely to screw up the HTML.

It’s no different to saying that HTML, CSS and JS give you framework agnostic design system components.

Which is just stating the obvious.