Creación de Web Components con Custom Elements y Shadow DOM
Contenido del curso
Fernando Quinteros Gutierrez
🗺️ APIs de Web Components
Apuntes
Custom Elements
<header> <main> <section <footer> las cuales mejoran temas como ser:
my-component
Shadow DOM
video cuenta con Shadow DOM
HTML Template
document fragment
ES Modules
RESUMEN: Para crear web components se necesitan cuatro tecnologías, Custom Elements para crear etiquetas de HTML, Shadow DOM para no tener conflictos con el código externo y pueda vivir nuestro código en diferentes lugares y finalmente ES Modules para poder reutilizar el código
Rony Porraz Vargas
Aqui esta la pagina oficial de web components! https://www.webcomponents.org/
Jimmy Buriticá Londoño
Gracias por el link
Brandon Argel Verdeja Domínguez
APIs de Web Components
Custom Elements: Un conjunto de APIs de JavaScript que permiten definir elementos personalizados y su comportamiento, que entonces puede ser utilizado como se deseé en la interfaz del usuario.
Ya que en el estándar de HTML 5 se seguirán añadiendo nuevas etiquetas, se debe seguir una regla para crear Custom Elements, para evitar problemas de colisión entre nombres de etiquetas deberás nombrarlos con al menos dos palabras separadas por un guion medio: <my-tag></my-tag>.
Debido a que en el estándar de HTML 5 sólo se agregan etiquetas de una sola palabra. ㅤ Shadow DOM: Un conjunto de APIs de JavaScript para fijar un árbol DOM "sombra" encapsulado a un elemento — que es renderizado por separado del documento DOM principal — y controlando funcionalidad asociada. De esta forma, se pueden mantener características de un elemento en privado, así puede tener el estilo y los scripts sin miedo de colisiones con otras partes del documento.
Se puede pensar en el Shadow DOM como un DOM dentro del DOM. Si el DOM creaba un árbol DOM global, el Shadow DOM crea un sub-árbol dentro del DOM regular. Y dentro del sub-arbol, los nodos HTML, el CSS y el JS son independientes, siendo esta su principal ventaja, ya que permite la encapsulación de pequeñas partes del documento y evita conflictos.
<video> e <iframe> cuentan con Shadow DOM.
ㅤHTML Template: Los elementos <template> y <slot> permiten escribir plantillas de marcado que no son desplegadas en la página renderizada. Éstas pueden ser reutilizadas en múltiples ocasiones como base de la estructura de un elemento personalizado.
document fragment, un fragmento, parte del document que necesita ser clonado para ser renderizado.ES Modules: Nos permite re-utilizar código de otros archivos.
HTML Imports fue parte de los estándares iniciales, pero no fue aceptada por todos los navegadores, importaba el contenido HTML de otro.
Misael Valdez
Una etiqueta de <video> contiene la opcion “controls” que nos agrega de manera predeterninada las opciones de play/pause, mute/unmute, etc. Si queremos un estilo mas cool para los controles del video deberiamos hacerlo con JavaScript y CSS.
Jose Manuel Montaño Saenz
APIs de Web Components
HTML Standard
Permite definir la etiqueta y hacer que el web component se pueda convertir en una etiqueta que el navegador pueda entender.
Estas etiquetas personalizadas o custom element, se deben crear con cautela puesto que quienes estandarizan HTML están constantemente creando nuevas etiquetas y para que no exista una conflicto las etiquetas personalizadas deben tener mínimo 2 palabras separadas por un -, ejemplo, mapa-geopolitico, la-etiqueta-mas-personalizada-del-mundo.
Shadow DOM
Normalmente se confunde con el virtual DOM que algunas framework y librerías tienen.
El Shadow DOM es generar un encapsulado perfecto permitiendo etiqueta contener código que no coexista con el código de a fuera, imposibilitando la sobre escritura de los estilos.
Custom Elements
Son APIS de JS que permite definir elementos personalizados y su comportamiento, que entonces puede ser utilizado como deseé en la interfaz del usuario.
HTML Templates
Es una sola etiqueta <template></template> usada junto con JavaScript. Si utilizamos esta etiqueta en nuestra arquitectura HTML no se va a renderizar y devolverá un document Fragment, ósea es un fragmento del documento y contenido será clonado y renderizado en el HTML.
Por esto debe ser combinado cono JS para generar esta clonación y renderización del componente.
Este proceso agrega mucho performance en el momento del renderizar los nodos en el DOM.
ES Modules
Anteriormente existía una API web llamada HTML Imports que permitía introducir código HTML en otro código HTML, pero no logro ser un estándar en todos los navegadores por lo cual desistieron de el.
Con la llegada de los módulos de ECMAScript 6 lograron exporta e importar código con JavaScript.
Las 4 web APIS son un conjuntos de estándares que facilitan el desarrollo de componentes sin la utilización de frameworks o librerías, otorgando un mayor performance al DOM.
Guillermo Castaño Vèlez
El camel case también es recomendado para nombrar las etiquetas
Kenneth Angulo L
¿Cuándo debo usar la etiqueta de template?
Debes utilizar la etiqueta <template> específicamente cuando necesites definir una estructura de HTML que se va a repetir o utilizar más adelante en la interfaz, pero que no quieres que consuma recursos de procesamiento de inmediato. Si colocas elementos pesados como imágenes de alta resolución o scripts complejos dentro de un <template>, el navegador los ignora por completo durante la carga inicial de la página; no los renderiza en pantalla ni los ejecuta. En su lugar, genera un Document Fragment, que actúa como una especie de plano arquitectónico inactivo en la memoria. Para darle vida a este plano, necesitas utilizar JavaScript para clonar ese fragmento específico e inyectarlo dinámicamente en el DOM real cuando el usuario lo requiera. Es la estrategia perfecta y más eficiente para optimizar el rendimiento general de tu aplicación, especialmente útil cuando construyes listas dinámicas, tarjetas de usuarios o cualquier elemento visual que deba instanciarse múltiples veces sin castigar la memoria del navegador.
Yan Arlex Vallejo Rosas
Entonces al generar etiquetas personalizadas, de alguna manera estamos perdiendo esa semántica? ya que en teoría los navegadores dan mas puntos para el SEO pero solo con las etiquetas "registradas" como el header, main, section, etc?
Carlos Eduardo Gomez García
Sí, básicamente, aunque no estoy seguro si son capaces de detectar que con JavaScript se están declarando, pero yo consideraría que si se pierde un poco la semántica 🤔
Miguel Angel Reyes Moreno
API de Web Components
Custom Elements -> Podemos crear nuestra etiqueta HTML y el navegador lo entenderá.
Regla de programadores: No hagas código para ti, haz código para los demás.
Etiquetas HTML5 personalizadas, por ejemplo:
<!--regla, tener un mínimo de 2 palabras separadas por un guión --> <mi-mapa></mi-mapa> <reproductor-de-musica></reproductor-de-musica>
Shadow DOM -> No es algo nuevo. La etiqueta video tiene shadow dom. Al abrir esta etiqueta en las DEV Tools veremos una sección que dice "#show-root".
Página donde podemos ver los componentes hechos por la comunidad
Documentación de Mozilla sobre Web Components
HTML Template -> Es una etiqueta de HTML, pero no la puedes usar en HTML, tienes que hacer un match con JS.
ES Modules -> Es la forma de usar código de JS en otro documento JS.
Jorge Méndez Ortega
Hace mucho tiempo di una breve intro sobre el uso de WebComponent a los miembrs de mi equipo de trabajo , le s comparto el repo por si les funciona
Arturo Mauricio Terceros Beltrán
Este es el web component de Google Maps
https://www.webcomponents.org/element/GoogleWebComponents/google-map
Kenneth Angulo L
¿Por qué es mejor crear etiquetas propias?
Imagina que entras a un almacén gigante donde todas las cajas dicen simplemente "Caja", representadas por la clásica etiqueta <div>. Encontrar algo específico en ese mar de contenedores idénticos sería una pesadilla logística. Crear tus propias etiquetas personalizadas, como <tarjeta-producto> o <menu-navegacion>, actúa como un sistema de etiquetado claro, directo y altamente semántico. Esto no solo hace que tu código sea infinitamente más fácil de leer y comprender para cualquier miembro de tu equipo, sino que también mejora drásticamente la accesibilidad y el mantenimiento a largo plazo del proyecto. Al dejar de depender de una sopa interminable de <div>, le otorgas un significado real y tangible a la arquitectura de tu aplicación. Cuando un nuevo desarrollador se integre al equipo y necesite modificar el reproductor de audio, simplemente buscará la etiqueta <reproductor-audio> en lugar de rastrear clases CSS perdidas o identificadores crípticos en un mar de contenedores genéricos. Es una práctica fundamental para escalar proyectos de manera profesional y ordenada.
Jefred Bedoya
Custom Elements
Permiten definir etiquetas HTML propias, extendiendo el estándar del navegador.
<mi-mapa>) para evitar conflictos con futuras etiquetas nativas.Shadow DOM
Proporciona un encapsulado perfecto para el DOM y los estilos.
<video>, donde los controles internos están ocultos y protegidos del estilo global.HTML Templates
Etiqueta (<template>) que define estructuras de marcado que no se renderizan automáticamente.
document fragment) y renderizarlo.ES Modules
Permiten reutilizar código entre archivos sin dependencias externas.
Jorge Arias Argüelles
Las Web APIs que forman los Web Components son:
Estas APIs permiten crear componentes web reutilizables y modularizados.
N40 M10
Shadow DOM me recuerda a como funciona Xmonad, por defecto xmonad ya tiene una configuración, no es necesario configurar nada, solo es necesario saber utilizar lo que ya tiene.
Pero en caso de querer crear una configuración propia lo que hacemos es sobreescribir, en caso de que no sobreescribamos algo automáticamente xmonad tomara esa parte de la configuración por default, esto hasta que decidamos sobreescribir esa parte.
Leonardo Moreno Faberón
Custom Elements + Shadow Dom
Leonardo Moreno Faberón
Custom Elements + Shadow Dom
Leonardo Moreno Faberón
Custom Elements + Shadow Dom
Leonardo Moreno Faberón
Custom elements + Shadow Dom
Leonardo Moreno Faberón
html template: se usa con javascript lo que pongas en ella no se ve en html genera un document fragment. fragment que necesita ser clonado para poder ser renderizado.