Cómo crear componentes personalizados (Custom Elements) en JavaScript

Los Custom Elements son una parte clave de los Web Components, y permiten crear tus propias etiquetas HTML con comportamiento reutilizable. Si vienes de frameworks como Vue o React, te sentirás muy cómodo con esta filosofía.

¿Qué es un Custom Element?

Es una etiqueta HTML personalizada, que tú defines con JavaScript. Por ejemplo: <user-card>.

¿Cómo se define?

Primero se crea una clase que extiende HTMLElement y se define con customElements.define().

// Definimos un nuevo componente llamado <user-card>
class UserCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <style>
        .card {
          width: 250px;
          border: 2px solid #333;
          padding: 1rem;
          border-radius: 8px;
          background: #f9f9f9;
        }
      </style>
      <div class="card">
        <h3>${this.getAttribute("nombre")}</h3>
        <p>Edad: ${this.getAttribute("edad")}</p>
      </div>
    `;
  }
}
customElements.define("user-card", UserCard);
  

¿Cómo se usa en HTML?

Una vez definido, puedes usarlo directamente:

<user-card nombre="Lluis" edad="35"></user-card>
  

¿Dónde se ponen los estilos?

Puedes usar estilos inline, o mejor, inyectar un bloque <style> dentro del componente para mantenerlo limpio:

this.innerHTML = `
  <style>
    .card {
      width: 250px;
      border: 2px solid #333;
      padding: 1rem;
      border-radius: 8px;
    }
  </style>
  <div class="card">
    <h3>${this.getAttribute("nombre")}</h3>
    <p>Edad: ${this.getAttribute("edad")}</p>
  </div>
`;
  

¿Y si quiero varios componentes?

Puedes crear un fichero como mis-componentes.js con múltiples definiciones:

// Archivo: mis-componentes.js
class UserCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `...`;
  }
}
customElements.define("user-card", UserCard);

class AvatarFoto extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<p>[Aquí va la imagen de perfil]</p>`;
  }
}
customElements.define("avatar-foto", AvatarFoto);
  

Y lo cargas en tu HTML con:

<script src="mis-componentes.js"></script>
  

¿Es como trabajar con Vue o React?

Sí. Comparte la idea de:

• Componentes reutilizables
• Propiedades/atributos dinámicos
• Encapsulamiento de lógica y estilos

La gran ventaja de los Web Components es que funcionan sin librerías externas y se pueden usar en cualquier proyecto.

Resumen

• Custom Elements = etiquetas HTML personalizadas
• Se definen con class ... extends HTMLElement
• Se registran con customElements.define()
• Se pueden usar clases, estilos, eventos, etc.

Ideal para crear interfaces modulares y escalables incluso sin frameworks.