Web Components
Web Components es una tecnología nativa en los navegadores web que permite definir etiquetas nuevas HTML que se comportan como componentes web. Se trata de un conjunto de estándares que permite que los navegadores puedan reconocer esas nuevas etiquetas y dotarle de comportamiento interactivo. Algunos frameworks web como Svelte hoy en día tienen la capacidad de compilar una aplicación para que sea compatible con este estandar, haciendo innecesario distribuir el framework con la propia aplicación porque el navegador se ocupa del resto.
-
Lección 📈 En tendenciaCustom 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. -
Lección 📈 En tendenciaSlots 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. -
Lección✱ 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. -
Lección✱ 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. -
LecciónTu 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. -
Lección✱ Asterisco: Todo sigue igual (2020)
Una revisión un año después al estado de los estándares para ver si sigue habiendo cosas nuevas que contar y para probar que la lista sigue viva. El resumen es que no. -
LecciónCustomized 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. -
LecciónShadow 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. -
Lección✱ 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. -
Lección✱ 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.