Web Components

Los Custom Elements son el corazón de las especificaciones de Web Components. Son definiciones de nuevos elementos HTML que se pueden usar en cualquier página web, igual que las etiquetas estándar del propio lenguaje HTML, pero definidas a base de código creado por un desarrollador.

Un Custom Element puede contener un marcado particular (lo que sería su vista) y una funcionalidad específica. Pueden ser tan sencillos como un botón o tan complejos como una completa aplicación web que se ejecuta en el navegador.

Para crear un custom element se utiliza una sentencia de Javascript estándar, de la especificación del W3C para Custom Elements.

customElements.define('nombre-del-componente', ClaseQueLoDefine);

El objeto customElements contiene un método llamado "define", que recibe dos parámetros:

• El nombre del componente que se desea definir. Este nombre necesita contener de manera obligatoria un guión separando dos o más palabras.
• La clase (de programación orientada a objetos) Javascript que implementa el componente.

Una vez definido el elemento personalizado, lo podemos usar como un tag HTML corriente, en el cuerpo de la página, mediante su propio nombre:

<nombre-del-componente></nombre-del-componente>

Al usarse el componente, se mostrará la vista que hayamos definido en la clase y se ejecutará la funcionalidad también definida en la clase del custom element.

Para implementar una clase que define un custom element no existe mayor requisito que haber sido declarada con la sintaxis de clases en Javascript ES6 y extender de alguno de los elementos HTML ya definidos en el navegador, como el que nos aporta HTMLElement.

Posteriormente podremos definir funcionalidad dentro de la propia clase, por ejemplo en el constructor, donde podremos realizar tareas de inicialización del web component.

class SaludoComponent extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = '<p>Hola Mundo!</p>';
  }
}

En este ejemplo clásico de "Hola mundo" estamos definiendo un custom element que, cuando se pinte, mostrará un párrafo con un texto.

Siguiendo el estándar Web Components podemos definir este elemento con la sentencia del "define":

customElements.define('saludo-component', SaludoComponent);

Para usar un componente es suficiente con incluir el script donde se ha definido y posteriormente colocar la etiqueta correspondiente en el cuerpo de la página.

Supongamos que nuestro componente se ha definido en un archivo Javascript llamado "saludo-component.js". En ese archivo estará la clase que define al componente y la sentencia "define" para registrar el componente. Incluiremos ese archivo en la página con una etiqueta <script>, de una manera como esta:

<script src="saludo-component.js"></script>

Posteriormente podemos usar la etiqueta del componente como cualquier otra etiqueta HTML existente:

<saludo-component></saludo-component>

Puedes ver un ejemplo completo con este proceso en el artículo Especificación Custom Elements, explicaciones y práctica

Los web components comenzaron incorporando un estándar específico para hacer la importación de los componentes en las páginas web, eran los HTML IMPORT. Sin embargo esa parte del estándar no llego a ser soportada ni apoyada por todos los navegadores.

En vez de ello, los fabricantes de navegadores decidieron usar la tecnología existente en Javascript de los ES6 modules.

Los ES6 modules son la manera estándar con la que se importa y exporta el código de JavaScript desde unos archivos de código a otros. dado que los navegadores ya tenían un sistema para importar código no se juzgó oportuno crear otro estándar únicamente para importar Web Components.

Actualmente para trabajar con Web Components e importar el código de cualquier custom element utilizamos la sentencia import de JavaScript.

import 'mi-web-component.js';

Esto implica que todo el código de los Web Components se debe de escribir en un archivo JavaScript. Algo que encaja perfectamente con las costumbres habituales de desarrollo de la parte del front end.

El shadow DOM es otra de las diferencias significativas de Web Components, con respecto a cualquier librería propietaria basada en componentes como React.

Básicamente shadow DOM es otra de las especificaciones del estándar web components mediante la cual podemos construir componentes que quedan aislados del exterior. Todo el markup y los estilos de los componentes que se encuentran en shadow DOM están encapsulados y no pueden sufrir interferencias accidentales con otros elementos de la página. Esto no implica un aislamiento total, ya que sigue habiendo posibilidad de interoperabilidad con el exterior, vía propiedades y atributos.

Shadow DOM es una utilidad opcional por lo que, si no se desea incorporar en un componente, es perfectamente posible construir el marcado en el DOM común de la página, como lo harían librerías no basadas en el estándar.

Crear Shadow DOM sobre un elemento de la página

Shadow DOM no es exclusivo de los Custom Elements. En realidad esta especificación de Web Components puedes usarla sobre elementos del DOM comunes.

Por ejemplo tenemos esta división.

<div id="elemento-comun"></div>

Como puedes comprobar, esta división está vacía. Podría cargar DOM dentro de ella con la propiedad innerHTML que ya se conoce, pero también podríamos agregar el nodo de Shadow DOM para agregar allí elementos.

document.getElementById('elemento-comun').attachShadow({ mode: 'open' });

En este caso es importante la configuración { mode: 'open' } para que podamos acceder desde fuera mediante Javascript al nodo raíz del Shadow DOM, para por ejemplo agregar marcado, lo que se consigue con este código.

document.getElementById('elemento-comun').shadowRoot.innerHTML = '<ul><li>Un item</li><li>Otro</li></ul>';

Crear shadow DOM en un Custom Element

Crear Shadow DOM sobre un elemento personalizado (Custom element) es la situación más común. Permite crear DOM encapsulado dentro del componente. Se hace de manera similar a como se haría en un elemento común solo que si estás dentro de la clase del componente puedes acceder a éste por medio de "this".

Lo típico es hacer esta operación desde el constructor, como se puede ver en esta clase que implementa un Custom Element.

class myComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = '<h1>Estoy colocando un encabezamiento como shadow DOM</h1>';
  }
}