> 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 que permitirá llevar la web a un nuevo nivel.

Web Components incluye cuatro especificaciones que nos van a servir para cambiar radicalmente el modo en el que construimos las páginas web, aportando nuevas herramientas capaces de extender el lenguaje HTML. Las veremos por separado y luego las utilizaremos en conjunto.

Los componentes, también llamados Custom Elements, son el corazón y objetivo final de este estándar y tienen como objetivo construir nuevos elementos para el lenguaje HTML. Éstos son como etiquetas HTML nuevas que puedes desarrollar tú mismo con muy poco esfuerzo, de modo que puedas realizar componentes para implementar cualquier tipo de tarea en el ámbito de una web, interfaz de usuario, etc.

Como Web Components es un estándar, podemos desarrollar directamente con Javascript y no estaremos obligados a usar alguna librería o framework adicional. En este manual nos centraremos en esta posibilidad, usar Web Components con Javascript estándar.

Por todo ello es una tecnología que ya podemos usar y beneficiarnos de extraordinarias posibilidades. En este manual vamos a recorrer diversos puntos del estándar para explicarlo, de modo que los desarrolladores puedan aprender y comenzar a usar Web Components.

Manual de Web Components
Artículos
  • Artículos del manual

  • Introducción a Web Components

    Web Components es un estándar de la W3C que está siendo definido en el momento de escribir este manual. Explicaremos con detalle en qué consiste el estándar y su filosofía. Las especificaciones están a distintos niveles de finalización pero, como ya se encuentran publicados sus borradores, varios navegadores las vienen implementando. Todos los navegadores en algún momento se adaptarán para soportar Web Components, pero para los navegadores antiguos explicaremos cómo usar el Polyfill, que nos aporta compatibilidad entre los clientes web que no lo implementan todavía.

  • 1 Qué son Web Components

    Los Web Components son 4 especificaciones que nos permiten extender el desarrollo para la web por medio de componentes web que cualquier desarrollador podría realizar.

  • Especificaciones de Web Components

    Vamos a explicar las cuatro especificaciones del estándar de los Web Components, que básicamente nos ofrecen nuevas etiquetas HTML y APIs Javascript para programación. Se pueden usar por separado, pero la verdadera potencia se da cuando se juntan para el desarrollo de nuevos elementos. Analizaremos de manera independiente cada una de las especificaciones que contiene, aportando ejemplos de uso con el código Javascript necesario para operar con ellas.

  • 2 Especificación Custom Elements, explicaciones y práctica

    Conoce la especificación de Custom Elements, que podríamos decir que es la principal del estándar de Web Components. Crea un componente wen con Javascript básico, basando sin usar ninguna librería.

  • 3 Extendiendo elementos en Web Components

    Cómo extender unos componentes a base de otros componentes, creando nuevos Custom Elements, con Javascript nativo.

  • 4 Template con Web Components

    Cómo es el estándar Template de los Web Components y cómo podemos usar el sistema de templating nativo en Javascript.

  • 5 Shadow DOM de Web Components

    Explicaciones y ejemplos de uso de Shadow DOM el estándar de Web Components que nos sirve para crear elementos del DOM encapsulados en otros elementos de la página.

  • 6 Ejemplo de Custom Element Nativo en Web Components V1

    Un ejercicio de creación de un custom element con Shadow DOM y slots, o componente Javascript nativo, creado con el estándar Web Components V1.

  • 7 Especificación Import en Web Components

    Explicamos en qué consiste la especificación de Import en los Web Components, junto con algunos ejemplos de uso.

  • 8 Ciclo de vida en los Web Components

    Qué es el ciclo de vida en los Web Components y cómo podemos ejecutar acciones en diferentes estados de los componentes.

  • Desarrollo basado en componentes

    En los siguientes artículos nos dedicaremos a mostrar ejemplos que nos permitan entender cómo usar Web Components, con sus diversas especificaciones en conjunto, para el desarrollo web. De este modo pretendemos ofrecer ejemplos ilustrativos sobre las posibilidades de este nuevo estándar.

  • 9 Librerías Javascript basadas en el estándar Web Components

    Conoce las principales librerías y frameworks Javascript que están construidos sobre el estándar de los Web Components.

  • 10 Custom elements sencillos y sus HTML import

    Ejemplos de custom elements sencillos y cómo usar la declaración import para incluirlos en una página web, de modo que se puedan usar.

  • 11 Practicando web components con VanillaJS

    Ejemplo de desarrollo de un custom element con Web Components y Javascript nativo en el que usamos las 4 especificaciones del estándar.