Web Components are a set of browser standards which allows us to create Custom HTML elements and use them in HTML pages. Web Components use 3 technologies to create these reusable elements.
Custom Elements – JavaScript class which contains the Element’s definition and behavior.
Shadow DOM – Used to render to custom component separately without affecting the actual DOM.
HTML Templates – The and elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
HTML Templates – The and
Web Component can be created by first creating a class with the actual component implementation. Once the class is created use CustomElementRegistry.define() register the custom element.
