WEB COMPONENTS
Integrantes:
Fernandez Aliaga Aldahir
Gisbert Mendez Karla Mikaela
Guevara Hoyos Josue Daniel
Nina Castillo Claudia Daniela
Ramos Paco Denis Helmer
WEB COMPONENTS
Son una tecnología estandarizada
por el World Wide Web Consortium
(W3C) que permite la creación de
elementos HTML personalizados,
reutilizables e independientes del
entorno en el que se ejecutan
Esta tecnología, formalizada en
2012, tiene como objetivo principal
encapsular la estructura, el
comportamiento y el estilo de los
elementos web, permitiendo a los
desarrolladores crear interfaces
robustas, modulares y reutilizables
sin depender de frameworks
específicos.
ESPECIFICACIONES FUNDAMENTALES DE LOS
COMPONENTES WEB.
01
Elementos Personalizados (Custom
02
DOM en la Sombra (Shadow DOM)
Elements)
Son etiquetas HTML que encapsulan La API Shadow DOM permite añadir
contenido HTML, y sus características árboles DOM ocultos a un árbol de
más importantes son: documentos, de forma que solo sea
Acaban con una etiqueta de cierre. visible la etiqueta HTML del Shadow
Su nombre es una secuencia DOM y DOM. De esta forma, pueden añadirse
siempre contiene un guion. elementos HTML al DOM oculto sin
Su nombre solo puede aparecer una tener que alterar cada vez también el
vez en el CustomElementRegistry. DOM principal.
ESPECIFICACIONES FUNDAMENTALES DE LOS
COMPONENTES WEB.
03
Módulos ECMAScript (ES Modules)
04
Plantillas HTML (HTML Templates)
Los elementos <template> y <slot>
Son módulos que exportan permiten escribir plantillas de
objetos, funciones o variables marcado que no son desplegadas en
desde un archivo de JavaScript. la página renderizada. Éstas pueden
Al hacerlo, pueden dividir ser reutilizadas en múltiples
variables en grupos dentro de un ocasiones como base de la
mismo archivo y referenciarlas. estructura de un elemento
personalizado.
COMPATIBILIDAD Y
USABILIDAD
Una de las principales ventajas de los Web
Components es su alta compatibilidad con los
navegadores modernos.
Además, su diseño agnóstico al framework
permite integrarlos fácilmente en aplicaciones
desarrolladas con Angular, React, Vue u otras
tecnologías, sin necesidad de modificar el
componente.
PROCESO DE LOS
COMPONENTES WEB
1
Fase de creación (constructor):
Se define la estructura inicial del componente, se puede crear
el Shadow DOM, y se establecen propiedades o elementos
base. Es importante destacar que en esta fase el componente
aún no forma parte del documento HTML visible.
2
Fase de inserción al DOM (connectedCallback):
El componente ya ha sido insertado en el árbol DOM del
documento. Es el momento ideal para inicializar
comportamientos interactivos.
3
Fase de eliminación del DOM (disconnectedCallback)
Esta etapa se activa cuando el componente es removido del
documento, ya sea manualmente o como resultado de algún
cambio en la interfaz.
4
Fase de adopción (adopted Callback)
Esta fase se activa si el componente es transferido de un
documento a otro, como ocurre en el caso de iframes. Aunque
no es común en la mayoría de aplicaciones, este método permite
realizar ajustes contextuales cuando el componente cambia de
entorno.
5
Fase de reacción a cambios en atributos
(attributeChangeCallback)
Si el componente observa atributos específicos mediante el
método estático observedAttributes, esta fase permite
reaccionar ante cualquier modificación en dichos atributos
TAREAS DE LAS FASES
Construcción del Inserción en el DOM
componente (connectedCallback)
El objetivo del constructor es El método connectedCallback() es
hacer ciertas tareas de iniciación una suerte de segundo
rápidas o tareas iniciales, como la constructor() que se ejecuta
creación de shadow DOM. Es cuando el custom element es
esencial que el constructor del conectado al documento HTML
(DOM), es decir, cuando el
componente se haga sólo las
componente es insertado o
tareas más prioritarias y ligeras.
añadido en el documento HTML
principal.
Eliminación del DOM Mover a otro documento
disconnectedCallback() es llamado (adoptedCallBack)
cuando un custom element es De uso menos frecuente, tiene
eliminado del DOM del documento sentido cuando se trabaja en
contextos multidocumento, y se
HTML.
dispara cuando un custom element
puede ser realmente útil para
se mueve de un documento HTML a
realizar tareas que, estarían
otro documento HTML diferente.
consumiendo recursos respecto a Para moverlo, se utiliza el método
ese elemento. .adoptNode().
Detección de cambios de atributos
(attributeChangedCallback)
Permitirá que el componente reaccione automáticamente cuando uno
de sus atributos HTML observados cambia de valor. Para ello, el
desarrollador debe declarar qué atributos quiere observar a través del
método estático observedAttributes(). Una vez definido esto, cada vez
que uno de esos atributos cambie ya sea desde el HTML o mediante
JavaScript el navegador ejecutará el método
attributeChangedCallback() del componente.
EJEMPLO
VENTAJAS
1 Encapsulamiento total: Gracias al Shadow DOM, los estilos y el
comportamiento del componente están completamente aislados del resto del
documento
2 Reutilización y mantenimiento: Permiten crear bibliotecas de componentes
reutilizables entre distintos proyectos o equipos
Compatibilidad con frameworks: Son agnósticos a cualquier framework (React,
3 Angular, Vue, etc.), lo que permite integrarlos fácilmente en diferentes entornos
tecnológicos.
4
Modularidad y escalabilidad: La separación en módulos mediante ES Modules y
el uso de plantillas HTML permiten estructurar el código de forma limpia,
ordenada y escalable.
5 Control total del ciclo de vida: Gracias a los callbacks se puede controlar con
precisión el comportamiento de los componentes a lo largo de su existencia
DESVENTAJAS
1 Curva de aprendizaje inicial. Implementar correctamente todas las fases del
ciclo de vida y dominar las cuatro tecnologías puede ser complejo para quienes
recién se inician en desarrollo web moderno.
2 Compatibilidad limitada en versiones antiguas. A pesar de ser compatibles con
navegadores modernos, pueden presentar problemas en navegadores antiguos
Falta de herramientas maduras. Las herramientas y ecosistemas aún no están
3 tan desarrollados como los de frameworks más consolidados (React, Angular,
etc.).
4
Estilización limitada desde el exterior. Debido al encapsulamiento del Shadow
DOM, aplicar estilos externos directamente a los componentes puede ser difícil,
lo cual complica la personalización sin exponer atributos específicos.
5 Mayor esfuerzo inicial. Crear componentes desde cero puede requerir más
tiempo de desarrollo en comparación con usar soluciones ya listas que ofrecen
frameworks o librerías externas.
CONCLUSIONES
Los Web Components representan una evolución significativa en
la forma de desarrollar interfaces web, ya que, es posible
construir componentes reutilizables, encapsulados y portables,
sin necesidad de depender de frameworks específicos.
Esta independencia tecnológica permite una mayor flexibilidad en
el desarrollo y facilita la interoperabilidad entre distintos
proyectos y plataformas.
MUCHAS
GRACIAS