APIs de Web Components

4/22
Recursos

Aportes 21

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

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

<h4>Apuntes</h4> <h4>Custom Elements</h4>
  • 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
<h4>Shadow DOM</h4>
  • 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
<h4>HTML Template</h4>
  • 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
<h4>ES Modules</h4>
  • 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.

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

<h4>API de Web Components</h4>

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.

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

Shadow DOM: Encapcular tu CSS.

APIs de Web Components

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

.