Web Components

 Web Components

Web Components are a set of technologies that allow you to create reusable and encapsulated components for the web. Web Components consist of three main technologies: Custom Elements, Shadow DOM, and HTML Templates. With Web Components, you can create your own custom HTML tags that encapsulate their own styles and behavior.

<!-- Define a custom element -->

<my-button></my-button>

<script>

  // Register the custom element

  class MyButton extends HTMLElement {

    constructor() {

      super();

      this.attachShadow({ mode: "open" });

      this.shadowRoot.innerHTML = `

        <style>

          button {

            color: white;

            background-color: blue;

            border: none;

            padding: 10px 20px;

            font-size: 16px;

            border-radius: 5px;

          }

        </style>

        <button><slot></slot></button>

      `;

    }

  }

  customElements.define("my-button", MyButton);

</script>

<!-- Use the custom element -->

<my-button>Click me!</my-button>