En 2011, Alex Rusell introdujo al mundo del Desarrollo Web el concepto de Web Components. Una colección de APIs del navegador a través de las cuales se podían crear elementos personalizados para su uso en la web.

El propósito de esta funcionalidad es poder separar la funcionalidad de nuestras Aplicaciones Web en el Frontend, en componentes, de la misma forma en que ya funciona HTML.

Los web components, también conocidos como Custo Elements son precisamente eso, elementos personalizados y propios que podemos usar en nuestro documento HTML.

<body>
   <slider></slider>
</body>

Estos elementos agrupan su funcionalidad, HTML, CSS y JavaScript y se exponen al exterior vía el uso de etiquetas tradicionales.

Son 4 las especificaciones que hacen funcionar el concepto de Custom Elements:

  • HTML templates
  • Shadow DOM
  • HTML imports
  • custom elements

Aunque la idea de separar la interfaz de nuestra aplicación en widgets suena excelente, la adopción de los Custom Elements por desarrolladores ha sido muy débil. Sin embargo, muchos frameworks populares como React y Angular han adoptado la idea de modularizar el frontend vía componentes.

Esto significa para nosotros, que siempre que creemos una aplicación con Angular, vamos a separar la funcionalidad de nuestra aplicación en componentes.

También significa que los componentes de Angular está pensados para alinearse con la especificación de la web, por lo que podemos usar Custom Elements nativos dentro de una aplicación de Angular, así como los componentes de Angular adoptan algunos de los conceptos más importantes como el Shadow DOM, que nos permite crear un árbol de elementos encapsulados por un solo elemento.

De hecho, justo ahora el equipo de experimentación de Angular Labs está trabajando en Angular Elements, una manera en la que podamos exponer nuestros componentes de Angular, para que estos sean usados como Custom Elements, esto nos permitirá usar los componentes de Angular en cuantos entornos queramos aún cuando el framework no esté integrado.

Continuemos.

Web Components

Siguiente arrow_forward