Web Components

> Temas > Web Components
Editar

Sección de contenidos dedicada a Web Components, el estándar Javascript para creación de elementos personalizados, reutilizables y encapsulados.

Este estándar Javascript sirve para crear componentes, capaces de realizar cualquier necesidad de un sitio o aplicación web, en el contexto del navegador. Un componente es como si fuera una etiqueta HTML, de hecho se utiliza igual, pero que ha sido creada por un desarrollador. Incluye una parte visual (cómo se muestra la etiqueta al usuario cuando es renderizada por el navegador) y una parte funcional (qué es capaz de hacer esa etiqueta y cómo interactúa con el usuario).

Los componentes tienen la característica de extender por tanto el HTML, creando elementos que se pueden reutilizar las veces que se desee, en el número de proyectos que se quiera y por cualquier desarrollador que lo necesite. Además están encapsulados, lo que quiere decir que no permiten que otros elementos de la página produzcan interferencias en su funcionamiento, a no ser que éstas sean deseadas.

Web Components es una tecnología estándar, capaz de funcionar en cualquier navegador que entienda Javascript, lo que nos ahora la descarga y procesamiento de pesadas librerías que permiten realizar cosas similares pero con código propietario.

Más información:

Web Components

Manuales

Manual de Web Components
En este manual vamos a conocer el nuevo estándar de los Web Components, una nueva tecnología implementada en navegadores modernos...
Manual de LitElement
Este es el manual de LitElement que te permitirá crear Custom Elements (elementos personalizados), bajo el estándar Javascript de Web Components, con una base de utilidades muy interesante para el desarrollador.
Manual de Polymer 3
Manual de Polymer 3, la librería para el desarrollo de componentes Javascript, basados en el estándar Web Components. Aprenderás a desarrollar componentes, centrándonos en las particularidades de esta versión con respecto a Polymer 2.
Manual de Polymer
Manual de Polymer 1, una librería para el desarrollo sencillo y rápido de sitios y aplicaciones web frontend basadas en el estándar Web Components.
Manual de Polymer 2
El manual de Polymer 2 te sirve para aprender a desarrollar componentes y aplicaciones bajo la librería de Google para el desarrollo frontend con el estándar de los Web Components.
Manual de Lit
Manual de la librería Lit para el desarrollo de custom elements bajo el estándar de Web Components.

Canales de eventos y clases en directo

Custom Elements

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.

Editar

Clase que define un 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);

Editar

Usar un componente

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

Editar

Imports con ES6 modules

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.

Editar

Shadow DOM

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>';
  }
}

Editar

¿Quieres añadir algo sobre Web Components?

Crea artículos, recursos o comparte información sobre Web Components

Crear un bloque

Temas relacionados

Preguntas y respuestas de Web Components

Se han recibido 9 faqs en Web Components

Hacer una pregunta