If you’ve used front-end web frameworks such as Angular, React, or Vue, you might be familiar with the concept of component-based design. UI/UX software like Sketch, Adobe XD, and InVision include tools for creating component libraries from design systems. But as a design system scales, how can we create a single source of truth to span multiple framework architectures and even non-framework web applications? One answer is to use web components.

What are Web Components?

Web components allow a developer to re-use the function and style of a designed asset such as a button, card, list, icon, etc. Each component is a predefined template that may be used again and again anywhere in the web application or across different web applications, even if they are using different web frameworks and architectures. Web components are not a broad term for the component systems seen in various frameworks. Rather, it is a standardized collection of native web technologies including the shadow DOM and custom elements that provide built-in HTML / JavaScript support for cross-framework and non-framework component-based design.

Why does it matter?

Because web components do not rely on a framework, they are portable, free to evolve with a scaling application, maintain backwards compatibility, and may grant some level of future-proof stability. Web components are also supported by all major front-end frameworks which can save money if an app stack were updated or acquired by another company and converted. From a design perspective, a reusable and standardized component system can save time. Baked-in styling regulation also reduces styling bugs. In addition, the semantic readable code that custom elements create leads naturally to greater accessibility and scaled software management.

Resources to get started

If you haven’t any experience with design systems and component based design methods, I recommend reading through the following:

https://bradfrost.com/blog/post/atomic-web-design/

https://designsystemsrepo.com/

If you’re ready to get started and build some web components today, I recommend heading over to https://open-wc.org/ . The prepackaged bundle comes with all of the libraries that make writing web components super fun including LitElement, Storybook, and a collection of testing tools.