1 Why web components?
This chapter covers
Web components are user interface (UI) components which are defined by a set of standardized browser APIs that describe how to implement custom HTML elements. They can be used to break up user interfaces into pieces that can be developed and tested independently, making them easier to maintain than monolithic user interface code. Web components also encapsulate their logic and styling in one place, so improvements made to them are reflected across all usages.
Perhaps most importantly, web components can be reused throughout an application and across multiple applications.
As a web developer, you want to create UI components in the simplest way possible. Components implemented with specific web frameworks (such as React, Angular, Svelte, and Vue) are usable only in applications built with those frameworks. What if developers could create UI components that they can use in any web application, regardless of its tech stack?
There are many approaches to implementing web components. You can build them using only what web browsers provide, or you can use libraries that simplify their development and add features. You can also use tools to simplify web component development, testing, and documentation. We’ll cover a few of the most popular libraries and tools.