En HTML se pueden crear elementos personalizados custom elements. Por ejemplo podríamos crear el control <alert> que nos permita agregar una alerta que dure 10 segundos en la página o cualquier otro tipo de control que queramos.

Crear elementos personalizados nos permite encapsular funcionalidades complejas de la página web en elementos fácilmente reutilizables.

Creando nuestro primer elemento personalizado

Para crear nuestro primer custom element crearemos un archivo index.html y un archivo helloworld.js


Nuestro archivo JS contendrá lo siguiente


Al cargar la página podremos ver en el log de nuestro inspector de elementos el mensaje «Hello World»

Antes de avanzar el archivo JS requiere de una explicación.

Para crear un elementos personalizados en HTML siempre utilizaremos la base anterior, aunque el extends podría cambiar si queremos extender una funcionalidad específica de otro elemento, por ejemplo de un radio button o de una lista ul.

La última línea del archivo JS también merece una explicación.


El método define recibe al menos 2 parámetros. El primero es un string que será el nombre del elemento definido. El segundo es la clase que definimos.

Agregando funcionalidad a nuestra componente


Para agregar funcionalidad utilizaremos el callback connectedCallback, este nos permitirá modificar el elemento al momento de ser insertado en el DOM.


Al recargar la página deberíamos ver el texto Hello World de color rojo.

Utilizando atributos


Los atributos son las características de nuestras componentes y son muy importantes ya que permiten que las componentes sean flexibles y reutilizables. Por ejemplo en:
<img src="gatito.svg" alt="gatito" width="150"> src, alt y width son atributos y los valores son: gatito.svg, "gatito y 150

En nuestra componentes personalizadas también podemos agregar atributos. Para aprender esto crearemos un ejemplo donde modificaremos nuestro componente para que pueda recibir el atributo color y dependiendo de este el mensaje aparezca de ese color.

Esto nos permitirá utilizar nuestra componente de la siguiente forma.


Obviamente esto no funcionará de forma automática, tenemos que indicar en el código de nuestra componente que debe utilizar el valor del atributo color, para lograr esto utilizaremos el siguiente código:


De la misma forma podemos crear métodos para capturar cualquier valor de un atributo de nuestras componentes.

Luego podemos utilizar el color simplemente con this.color


Los custom elements son solo una parte de la teconlogía llamada web components, otras componentes muy interesantes a estudiar son los HTML Templates y el shadow DOM.

Share Button