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 👀

🗺️ 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

Aquí esta en enlace a webcomponents
webcomponets.org

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/

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.

Este es el web component de Google Maps

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

El camel case también es recomendado para nombrar las etiquetas

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: 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.

• No es una alternativa al virtual DOM
• Etiquetas como <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.

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

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.

Custom Elements + Shadow Dom

Custom Elements + Shadow Dom

Custom Elements + Shadow Dom

Custom elements + Shadow Dom

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.

shadow dom

Web API’s utilizadas:

• Custom elements: Un set de API’s de Javascript que nos permiten definir custom elements y su comportamiento, a los cuales podemos utilizar como deseemos en nuestra interfaz de usuario.

• Shadow DOM: Un set o conjunto de API’s para adjuntar un ‘shadow’ DOM tree encapsulado a un elemento y controlar la funcionalidad asociada. Este tipo de DOM asociado al elemento, se reenderiza separadamente del DOM del documento principal.

  De esta forma, podemos hacer privadas las características de un elemento, por lo tanto, este podrá ser scripted y styled (¿Codeado y estilizado?) sin el miedo de que colisione con otras partes del documento.

• HTML templates: Los elementos <template> y <slot> nos permiten escribir plantillas de marcado o markup templates que no son mostradas ni renderizadas en la página. Estas pueden ser reutilizadas múltiples veces como la base de la estructura de un custom element.

Fuente: Web Components

Custom elements: Crea nuevas etiquetas HTML que el navegador pueda entender.

• Introduccion to custom elements

HTML Template: Crea plantillas flexibles que puedan utilizarse para rellenar el Shadow DOM.

• <template> tag

Shadow DOM: Encapcular tu CSS.

• Encapsulating styles

APIs de Web Components

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

.