Web Components

 Web Components

Web components are a set of technologies that allow you to create reusable and encapsulated UI components. They consist of three main parts: custom elements, shadow DOM, and HTML templates. Web components can help you create complex UIs that are easy to maintain and reuse across multiple projects.

Here's an example of how to create a web component using the shadow DOM:

class MyComponent extends HTMLElement {

  constructor() {

    super();

    const shadow = this.attachShadow({mode: 'open'});

    const div = document.createElement('div');

    const style = document.createElement('style');

    style.textContent = `

      div {

        color: red;

      }

    `;

    div.textContent = 'Hello, World!';

    shadow.appendChild(style);

    shadow.appendChild(div);

  }

}

customElements.define('my-component', MyComponent);

And here's how to use the web component in your HTML code:

<my-component></my-component>