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
​

<html lang="en">
<head>
  <script src="helloworld.js"></script>
</head>
<body>
  <hello-world> </hello-world>
</body>
</html>

​
Nuestro archivo JS contendrá lo siguiente
​

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    console.log('hello world');  
  }
}
​
window.customElements.define('hello-world', HelloWorld);

​
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.

window.customElements.define('hello-world', HelloWorld);

​
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.
​

class HelloWorld extends HTMLElement {
  constructor() {
    super();
  }
​
  connectedCallback(){
    this.innerText = 'Hello World';
    this.style.color = 'red';
  }
}

​
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.
​

  <hello-world color="red"> </hello-world>
  <hello-world color="green"> </hello-world>
  <hello-world color="blue"> </hello-world>

​
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:
​

 get color(){
    return this.getAttribute('color');
  }

​
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
​

class HelloWorld extends HTMLElement {
  constructor() {
    super();
  }
​
  connectedCallback(){
    this.innerText = 'Hello world';
    this.style.color = this.color;
  }
​
  get color(){
    return this.getAttribute('color');
  }
}
​
window.customElements.define('hello-world', HelloWorld);

​
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.