El ciclo de vida de web components es un proceso que integra todas las etapas de esta herramienta de etiquetado HTML a lo largo del desarrollo de tu código y la ejecución de tu sitio web. Los elementos personalizados pueden integrarse en cualquiera de estos estados y realizar un tiempo de tareas específico.
Como verás si sigues leyendo este post, estos estados, todos integrados con callback, son de gran ayuda para los desarrolladores web, pues se trata de elementos JavaScript que se ejecutan en el momento en el que los web components pasan por los estados listados a continuación.
Ciclo de vida de web components
Cuando hablamos de el ciclo de vida de web components, también estamos hablando de cómo estos elementos o componentes web pasan por un estado específico dentro de un ciclo de vida. De esta manera, cada uno de los estados del ciclo de vida derivan en la ejecución de una función definida en su interior.
Entre tanto, el ciclo de vida no aparece cuando el usuario interactúa, sino cuando el web component se añade y se dispara dentro de un programa de desarrollo web. Así pues, a continuación te traemos los 5 componentes del ciclo de vida: constructor, connectedCallbak, disconnectedCallback, adoptedCallback y attributeChangedCallback.
constructor
En primer lugar, encontramos la etapa de vida del constructor, que es el momento en el que se instancia la clase; esta es la que representa el web component. En este caso, el estado de constructor aparece cuando utilizamos un web component en el DOM y se instancia. Tiene el mismo proceso que el elemento new de una clase en JavaScript.
connectedCallback
El estado de connectedCallback del ciclo de vida aparece cuando el navegador ha conectado el web component con el DOM.
disconnectedCallback
A diferencia del anterior, el estado de disconnectedCallback aparece cuando el navegador se ha desconectado del DOM o del árbol DOM.
adoptedCallback
El estado adoptedCallback sucede cuando un web component se mueve de un documento o archivo escrito HTML a otro, como a un archivo iframe. Este es uno de los estados menos frecuentes dentro del desarrollo web con estas herramientas.
attributeChangedCallback
Este último estado es el de attributeChangedCallback, que aparece cuando uno de los atributos del web component que se está observando ha cambiado de valor. Si esta propiedad cambia, el web component avisará.
¿Qué sigue ahora?
En este artículo has aprendido cómo funciona el ciclo de vida de web components, que es el proceso por el que tienen que pasar estas herramientas para integrarse y ejecutarse dentro de los programas del desarrollo web. Ahora, es el momento de profundizar en el uso de cada uno de ellos para no tener ningún problema de escritura. Para ello, la mejor opción es nuestra formación intensiva en Desarrollo Web Full Stack Bootcamp, con la que aprenderás a nivel teórico y práctico con la guía de grandes profesionales en el sector. ¡Entra ya y solicita información para empezar a cambiar tu vida!
