Web Components

Web Components es una tecnología propuesta por la W3C para la elaboración de componentes reusables e independientes en las aplicaciones web. Es una alternativa a React, Vue o Angular, que permite crear componentes donde todo el runtime está en el navegador, aprovechando la plataforma y permitiendo usar vanilla JS.

13:00

1. El qué y por qué de los componentes web

Web Components es la recomendación que se está integrando en los navegadores web modernos y que permite crear componentes reusables utilizando tecnologías nativas propias de la plataforma web para fabricar nuevas experiencias web.

19:04

2. Tu primer Web Component

En este vídeo usamos la API Custom Elements para fabricar un Custom Element (una de las tecnologías que integra Web Components), explicando cómo funciona la API de Custom Elements.

13:12

3. La etiqueta template de HTML5

La etiqueta template forma parte del estandar HTML5 y permite disponer de fragmentos DOM que no son visibles en la página web, pero que pueden ser manipulados mediante JavaScript.

4:42

4. ✱ Asterisco: Documentos DOM

Un pequeño inciso para hablar sobre documentos DOM y sobre por qué no es posible usar directamente los nodos DOM que cuelgan de un HTML template en el documento maestro.

9:19

5. Custom Elements usando HTML Templates

Ahora que hemos visto en qué consisten las templates de HTML5, podemos ver cómo integrar una template y extraer su contenido, para incorporarla en un Custom Element.

8:43

6. ✱ Asterisco: Microframeworks y JSX

Un pequeño inciso para hablar acerca de los microframeworks, las microlibrerías y otras maneras de obtener usando vanilla JS un comportamiento similar al de JSX.

7:02

7. Shadow DOM

Shadow DOM es una API para encapsular el DOM de un componente, con el objetivo de que no se pueda alterar su presentación o sus eventos DOM desde fuera.

7:16

8. Slots de Shadow DOM

Con slots, se puede disponer de un sistema para preparar placeholders en un template HTML insertado en un Custom Element, para poder especificar declarativamente el contenido de esa etiqueta usando únicamente lenguaje de marcado.

4:54

9. ✱ Asterisco: Open vs Closed en Shadow DOM

¿Qué diferencia hay entre marcar un Shadow DOM usando open o closed en el modo? Esta es una pregunta a la que buscamos la respuesta en este capítulo.

13:58

10. Customized built-in elements

Los customized built-in elements son una alternativa a los autonomous elements, cuando únicamente queremos alterar la presentación de un componente sin vernos forzados a reinventar la accesibilidad, eventos de teclado, o todo lo que una etiqueta HTML normal haría.

8:59

11. Polyfills para Web Components

Nos caemos del guindo: Web Components no funciona en todas partes. En este vídeo, exploramos cómo con un polyfill podemos hacer que Web Components funcione en Microsoft Edge, Internet Explorer, o Safari.

6:10

12. ✱ Asterisco: The end... por el momento

No puedo hacer más vídeos en este momento porque las APIs que quedan ahora mismo por contar son tan recientes que los navegadores todavía no las tienen soportadas. Cliffhanger perfecto para prometer eternamente una segunda temporada.