Web components are those functions that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. These are the concepts that involve their creation:

• Custom elements: A set of JavaScript API for creating web components.
• Shadow DOM: A DOM that is separated from the main one in the document.
• HTML templates: Tags like <template> or <slot> that enable you to write markup templates.

1. Create a class that extends from HtmlElement.
2. Register it using CustomElementRegistry.define().
3. If required, atach a shadow DOM Element.attachShadow().
4. If required define templates with <template> and <slot>.
5. Use the defined tag.

(function() {
    class MyTitle extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <style>
            h1 {
              font-size: 2.5rem;
              color: hotpink;
              font-family: monospace;
              text-align: center;
              text-decoration: pink solid underline;
              text-decoration-skip: ink;
            }
          </style>
          <h1>Hello Alligator!</h1>
        `;
      }
    }
 
    window.customElements.define('my-title', MyTitle);
  })();

Now we can add the tag <my-title></my-title> to our code and a pink “Hello Alligator!” will appear.

• connectedCallback: Invoked when the custom element is first added to the document's DOM.
• disconnectedCallback: Invoked when the custom element is removed from the document's DOM.
• adoptedCallback: Invoked when the custom element is moved to a new document.
• attributeChangedCallback: Invoked when one of the custom element's attributes is added, removed, or changed.

• Mozilla basic documentation
• Mozilla web components examples
• Google documentation