Micro-frontends and Web Components
What are web components?
Web Components are actually a set of three different standards that allow developers to create reusable components, in an object oriented way. These three main technologies are:
- Custom Elements, a collection of web platform APIs that can be laveraged to create a custom HTML element and define its behavior.
- The Shadow DOM, another set of native APIs that enables a shadow or virtual object model that is attached to the custom element, and encapsulated away from the main document object model functionality.
- And finally, HTML templates, a capability to write markup that is not immediately rendered in the page, and can be used as a blueprint to any custom element.
Go here to learn more about Web Components.
Because Web Components implement JavaScript class, we may need to consider a framework to help us create and instantiate them, as well as add reactive features and manage state.
Want code? You can see an example repository for our AI Sample, where a chat component built with Web Components and Lit is bootstrapped to a React shell.