Web Components
Explore how Web Components enable the creation of reusable and encapsulated custom HTML elements. Understand autonomous and customized built-in elements, shadow DOM for style encapsulation, and the use of HTML templates. This lesson helps you build modular web designs that integrate seamlessly with frameworks like React and Vue.
Introduction
Here’s the official definition of 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.”
— MDN.
In English, that just means that Web Components are a way for you to create your own HTML tags that you can reuse later.
Front-end frameworks like React or Vue have their own set of components (buttons and such) with all the JavaScript functionality and styling included. Web Components work a lot like those components. You can actually easily integrate Web Components with something like React.
There are ...