Web Components is a suite of different technologies allowing you to create reusable custom elements
web components consists of 3 main technologies:
- custom elements: A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface.
- shadow DOM: A set of JavaScript APIs for attaching an encapsulated “shadow” DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element’s features private, so they can be scripted and styled without the fear of collision with other parts of the document.
- HTML templates: The
<template>and<slot>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
the basic approach for implementing a web component generally looks something like this:
- Create a class or a function in which you specify your web component functionality. If using a class, use the ECMAScript 2015 class syntax (see Classes for more information).
- Register your new custom element using the
CustomElementRegistry.define()method, passing it the element name to be defined, the class or function in which its functionality is specified, and optionally, what element it inherits from. - If required, attach a shadow DOM to the custom element using
Element.attachShadow()method. Add child elements, event listeners, etc., to the shadow DOM using regular DOM methods. - If required, define an HTML template using
<template>and<slot>. Again use regular DOM methods to clone the template and attach it to your shadow DOM. - Use your custom element wherever you like on your page, just like you would any regular HTML element.