APIs de Web Components

mi poder aumenta…!!

En este enlace tienen la definición de las API’s de las que se acaban de hablar:
.
https://developer.mozilla.org/es/docs/Web/Web_Components#conceptos_y_uso
.
Lo que más me llama la atención es el shadow DOM porque se parece mucho a lo que hace Vue (y yo sé que cuando un experto lea esto le va a dar algo). Se parece en el sentido en que hacen lo mismo, es decir, encapsulan todo el código y permiten generar un scope para cada elemento por separado.
.
Sin embargo, el cómo lo hacen es otra cosa aparte, mientras que Vue tiene que usar algunas técnicas para encapsular todo y demás, WebComponents lo hace directamente con tecnologías nativas, es decir, es como crear un sub-dom únicamente para este elemento.
.
Ya había visto el shadow dom antes, la primera vez que lo vi fue como “what is this?” jaja, por cierto, las etiquetas iframe, también tienen un shadow DOM 👀

Aquí esta en enlace a webcomponents
webcomponets.org

🗺️ APIs de Web Components

• Es la API que te permite definir la etiqueta usando un web component
• HTML 5 implico una mejora en semántica
  • Brinda nuevas etiquetas como ser <header> <main> <section <footer> las cuales mejoran temas como ser:
    • Accesibilidad
    • Marcar secciones el código de una mejor forma
    • Mejorar la lectura del código
  • Actualmente se sigue aumentando el standard
    • Eso implica que si generamos etiquetas propias puede haber un conflicto de nombres
• Para evitar el problema de colisión de nombres se debe nombrar los elementos con dos palabras my-component
  • Debido a que el standard sigue la regla que las nuevas etiquetas que se introducen son con solo una palabra

• No es una alternativa al virtual DOM
• La etiqueta video cuenta con Shadow DOM
  • Esta etiqueta cuenta con cosas programadas como ser
    • Botones de play, pausa y agrandar
    • Barras interactivas como ser el avance del video y el volumen del mismo
    • Estilos propios
  • Los estilos nunca tendrán un conflicto con nuestros estilos debido a que está usando el shadow DOM
• Es decir que el código vive dentro del shadow DOM y no coexiste con el código de afuera
  • Resolviendo el problema de conflictos con los estilos

• Es una etiqueta de HTML
• No se puede usar directamente con HTML
  • Se debe usar JS para utilizarla
• Regresa un document fragment
  • Es un fragmento, parte del document que necesita ser clonado para ser renderizado
• Utilizar esta etiqueta hace que todo el contenido no se muestre
  • Nos da performance, porque no se renderiza directamente

• Nos permite re utilizar el código de otros archivos
• HTML Imports
  • Importaba el contenido HTML de otro
  • Pero no fue standard

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

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.

Aqui esta la pagina oficial de web components!
https://www.webcomponents.org/

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.

APIs de Web Components

• Custom Elements
• Shadow DOM
• HTML Template
• ES Modules

Este es el web component de Google Maps

https://www.webcomponents.org/element/GoogleWebComponents/google-map

.