Skip to content 2.0

Micro-frontends and Web Components

Author: Natalia Venditto

Date First Published: Wed Jan 04 2023

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.