¿Qué son los WebComponents?

WebComponents es el nombre por el que se conoce a un conjunto de características relacionadas con HTML, CSS y Javascript, con las cuales se busca una mecánica general para crear un modelo estándar de componentes, abierto y que resuelva la mayoría de los problemas siempre desde un enfoque general.

¿Qué son los WebComponents?

Nota: En contexto web, cuando hablamos de un componente nos referimos a una forma de unir el marcado (HTML), estilo (CSS) y funcionalidad (Javascript) con una misma finalidad.

Con los WebComponents se persiguen dos objetivos principales:

  • Encapsulación: Crear elementos aislados del exterior, protegiendo su contenido y haciendo más fácil su desarrollo, centrándonos así en la funcionalidad del elemento concreto y protegiéndolo ante efectos no deseados o cambios que no deberían ocurrir. Se trata de traer una característica muy popular y deseada en el mundo de la programación, que facilita la labor de los desarrolladores y hace más fácil la reutilización en aplicaciones muy grandes.

  • Interoperabilidad: Facilitar la posibilidad de intercambiar información entre sistemas diferentes, utilizando tecnologías abiertas y estándares, con las que no dependemos de tecnologías particulares que podrían obligarnos a decidir con antelación si debemos utilizar una cierta serie de características y/o basar nuestros futuros desarrollos (o incluso decisiones) al enfoque particular que pudieran seguir.

Como hemos dicho anteriormente, los WebComponents son un conjunto de características nativas que hacen posible la creación de componentes webs sin necesitar librerías o frameworks particulares, sino haciendo uso únicamente de HTML, CSS y Javascript. Vamos a ver de que características se trata.

WebComponents: Custom Elements, Templates, Shadow DOM y ES Modules

Custom Elements

Los custom elements (elementos personalizados) son una de las características principales que forman los WebComponents. Con ellos, se nos permite crear nuestras propias etiquetas HTML, pudiendo dotarlas de su propia funcionalidad, marcado HTML o estilo CSS.

La forma rápida de diferenciar estas etiquetas personalizadas de las etiquetas nativas de HTML5 es observando que los custom elements deben llevar al menos un guión - en su nombre:

<!-- Etiqueta <div> estándar de HTML5 -->
<div class="emoji">:)</div>

<!-- Custom Element <app-emoji> -->
<app-emoji name="happy"></app-emoji>

De esta forma, podemos asegurarnos de que no crearemos una etiqueta que en el futuro pueda existir en HTML y pueda colisionar con nuestra aplicación. La funcionalidad de dicho custom element se implementa desde Javascript, extendiendo de la clase HTMLElement, como veremos más adelante.

Templates

Otra de las características de WebComponents es la de los templates (plantillas). Se trata de una etiqueta de HTML que nos permite crear contenido inerte en una página, esto es, contenido HTML que no se procesará por el navegador, y que permanecerá «muerto» hasta que lo utilicemos desde Javascript para crear nuevos elementos en base a él.

<template id="user-template">
  <div class="user">
    <h1>Username</h1>
    <img src="user-image.png" alt="Username">
    <a href="https://website.com/">URL</a>
  </div>
</template>

Todos los elementos que existen en el interior de la plantilla (imágenes, scripts, etc...) no serán procesados durante la carga de la página, por lo tanto, el navegador no invertirá recursos en su procesamiento. Esto nos puede interesar para preparar contenido reutilizable y que solo consuma recursos cuando lo clonemos desde Javascript.

Shadow DOM

Probablemente, una de las características más interesantes (y complejas) de WebComponents sea el Shadow DOM. Esta característica se basa en crear un DOM especial «en la sombra» de un elemento HTML. Para entender esto, debemos tener claro que el DOM es la estructura de elementos de un documento HTML.

Así pues, un elemento HTML con Shadow DOM se podría ver de esta forma:

<div class="element">
  #shadow-root
    <div class="inner-element">
      ...
    </div>
</div>

En el ejemplo anterior se representa un <div class="element"> que contiene un Shadow DOM en su interior. Este #shadow-root representa ese DOM en la sombra. En ese DOM particular del elemento, a su vez, existe dentro una etiqueta <div class="inner-element"> que podrá tener todo su contenido o incluso más etiquetas hermanas.

La misión del Shadow DOM es crear una estructura aislada, independiente del DOM principal de la página, donde se pueda trabajar de forma local, sin que repercuta con el resto del documento.

Nota: Aunque sirve para muchas cosas más, el Shadow DOM es una excelente forma de crear estructuras con estilos CSS locales, que sólo repercutan en dicha estructura, y en la que no afecte el CSS de fuera, algo que los desarrolladores llevan buscando años.

Módulos ES (ESM)

Los módulos ECMAScript (ESModules o ESM) son otra de las características que hace posible que existan los WebComponents. Se trata de un estándar de Javascript, que permite organizar elementos de nuestro código Javascript (constantes, funciones, clases, etc...) en módulos y exportarlos, para ponerlos a disposición de otro archivo Javascript que quiera importarlos.

Estos import/export se pueden hacer directamente desde Javascript a través de los Módulos ESM o incluso desde HTML, utilizando el atributo type establecido al valor module:

<script type="module" src="fichero.js"></script>

Este tipo de importación de módulos es equivalente al import "fichero.js"; que podemos realizar desde Javascript y nos puede servir para cargar WebComponents directamente desde HTML.

A raíz de esta especificación, están naciendo los llamados HTML Modules, CSS Modules (ojo, no confundir con CSS Modules) y JSON Modules. Se tratan de implementaciones nativas del navegador para permitir importar archivos HTML, CSS o JSON desde un fichero Javascript o HTML. Esta especificación aún está en fase experimental y no está implementada en los navegadores.

Nota: En alguna ocasión es posible que nos encontremos una característica llamada Imports HTML. En algún momento llegó a formar parte de WebComponents, pero finalmente fue descartada y marcada como obsoleta, a favor de los Módulos ESM.

CSS Scopes & Shadow Parts

Por último, CSS Scopes es otra de las características que surge a raíz de los cambios en el mundo de CSS en los WebComponents, con novedades como Shadow DOM, Custom Elements o los Slots que pueden tener relación con los estilos.

Por un lado, tenemos una serie de pseudoclases CSS que nos permiten aplicar estilos al elemento contenedor del componente, dependiendo de varios factores que explicaremos más adelante.

Dichas pseudoclases son :host, :host() y :host-context(). Además, también disponemos de un pseudoelemento CSS llamado ::slotted() con el que podemos aplicar estilos a elementos HTML que sean hijos directos de un <slot>, algo que también veremos posteriormente.

Por otro lado, tenemos las denominadas CSS Shadow Parts, una especificación que nos provee de un pseudoelemento ::part() con el cuál podemos aplicar estilos a partes expuestas de un Shadow DOM.

Estas son las características principales que forman parte de los llamados WebComponents. Cada una de ellas es una característica independiente, no obligatoria en un WebComponent. Sin embargo, la verdadera potencia de todas ellas es la posibilidad de unirlas y utilizarlas combinadas para crear potentes componentes web, como iremos viendo más adelante.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.