CUSTOM ELEMENTS: QUÉ SON Y CÓMO CREARLOS

Un Custom Element es una de las tecnologías principales de las Web Components. Es la capacidad nativa del navegador que te permite crear etiquetas HTML propias y personalizadas. En lugar de usar solo las etiquetas estándar como "<div>", "<button>" o "<p>", se pueden crear etiquetas propias como:"<mi-tarjeta>", "<mi-boton>","<mi-modal>", "<naiker-header>".

¿Cómo funciona?

Crear una clase JavaScript que extiende de HTMLElement:
```
class MiComponente extends HTMLElement {
  constructor() {
    super();
    // Aquí se configura el componente
  }
}
```
HTMLElement es una interfaz en JavaScript que representa cualquier elemento HTML en el DOM, Document Object Model. Es la clase principal que el navegador utiliza para todos los elementos HTML estándar
Registrar el elemento para que el navegador lo reconozca:
```
customElements.define('mi-componente', MiComponente);
```
Usarlo en HTML como cualquier otra etiqueta:
```
<mi-componente></mi-componente>
```

Ejemplo

class MiComponente extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); // ← Crea el Shadow DOM
    this.shadowRoot.innerHTML = `
 <style>
   p { color: blue; } /* Este estilo NO afecta al resto de la página */
 </style>
 <p>Hola desde dentro del Shadow DOM </p>
    `;
  }
}