Libro de recetas de la API web

Capítulo 12. Componentes web

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Introducción

Los componentes Web son una forma de construir nuevos elementos HTML con su propio comportamiento. Este comportamiento se encapsula en un elemento personalizado.

Crear un componente

Puedes crear un componente web definiendo una clase que extienda HTMLElement, como se muestra en el Ejemplo 12-1.

Ejemplo 12-1. Un componente web básico

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from MyComponent';
  }
}

Cuando añades el elemento personalizado al DOM, el navegador llama al método connectedCallback. Aquí es donde suele residir la mayor parte de la lógica de tu componente. Es una de las llamadas de retorno del ciclo de vida. Otras llamadas de retorno del ciclo de vida son:

disconnectedCallback

Se ejecuta cuando eliminas el elemento personalizado del DOM. Es un buen lugar para hacer limpieza, como eliminar escuchadores de eventos.

attributeChangedCallback

Se ejecuta cuando cambias uno de los atributos observados del elemento.

Registrar un elemento personalizado

Una vez que hayas creado tu clase de elemento personalizado, debes registrarlo en el navegador antes de utilizarlo en un documento HTML. Puedes registrar tu elemento personalizado llamando a define en el objeto global customElements, como se muestra en el Ejemplo 12-2.

Ejemplo 12-2. Registrar un elemento personalizado ...