mi poder aumenta…!!
Introducción a los Web Components
Introducción a los Web Components
¿Qué problemas resuelven los Web Components?
¿Qué son los Web Components?
APIs de Web Components
Beneficios de Web Components
Ciclo de vida de los Web Components
Ciclo de vida de un componente
Web Components
Custom Elements
Template
Shadow DOM
Manejo de datos
Content Slot
Multi Content Slot
Atributos
attributeChangedCallback
disconnectedCallback
Estilos en Componentes
:host
::slotted
CSS custom properties
Proyecto
Presentación del proyecto
Estructura base de nuestro componente
Atributos en nuestro componente
Web Components de terceros
Utilizando componentes de terceros
Conclusiones
Conclusiones
Aportes 21
Preguntas 2
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 👀
<header> <main> <section <footer>
las cuales mejoran temas como ser:
my-component
video
cuenta con Shadow DOM
document fragment
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/
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
.
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.
Son APIS de JS que permite definir elementos personalizados y su comportamiento, que entonces puede ser utilizado como deseé en la interfaz del usuario.
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.
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.
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.
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
.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.