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:

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

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.

Editar

¿Quieres añadir algo sobre Web Components?

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

Crear un bloque

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

Canales de eventos y clases en directo

Temas relacionados

Preguntas y respuestas

Se han recibido 3 faqs en Web Components

Hacer una pregunta