In case you missed my first post “Implementing a design system”, we chose to implement our design system with web components. This post will be about our thought process and the tradeoffs we considered when deciding on how we would implement with web components.

It is possible to write a web component using only native JavaScript and HTML, but it is challenging. It is much more common to use a library like Lit or Stencil. The library helps with registration of the web component and change management as well as interoperability with popular frameworks. In our case, in addition to Lit and Stencil, we also considered Mitosis, and compiling to web components with Solid or Angular.

For the last year one of my main projects at work has been to lead the implementation of a design system, building it together with my team. It’s not a perfect implementation but I’m quite proud of what we have accomplished so far with limited resources. I’d like to share some of our insights and experiences, about specific decisions we’ve made and why.

Let’s begin with the needs expressed by the organization: