About Web Components
What are web components?
“Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.” - Mozilla Page on Web Components
Web components consist of three main parts:
- Custom elements: define custom elements and their define behavior
- Shadow DOM: A way to encapsulate the style of the element separately by rendering the DOM separately
- HTML templates: Reusable HTML structures that can be used inside web components.
The Mozilla page has a basics approach for implementing web components as well as tutorials and examples. It is highly recommended you read through it before searching the web as it will give you a good foundation.