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.
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.
If you haven’t any experience with design systems and component based design methods, I recommend reading through the following:
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.