Creo que se le pasó dejar el recurso de la documentación para los ciclos de vida, les dejo esta, aunque no sé si es la que él tenía en mente:
.
Usando callbacks de ciclo de vida
.
También les dejo el código de esta clase 😄
.
Adicion de ejemplo del disconnected callback
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
disconnectedCallback
14/22Recursos
Aportes 9
Preguntas 3
Ordenar por:
MY NOTES FOR DISCONNECTED CALLBACK
disconnected callback nos servirá para deslindar de eventos a nuestros componente, dentro de esa función podremos retirarlos para liberar espacio en memoria.
class MyCustomElement extends HTMLElement{
constructor(){
super()
//Aqui estamos establecieno en memoria las cosas que vamos a utilizar
//Para nuestro componente
console.log('hola desde el constructor - Memoria')
//Pero esto no quiere decir que ya exista en el dom
}
//Para que exista en el dom llamaremos a nuestro siguiente ciclo de via
connectedCallback(){
//Nuestro elemento ya existe como nodo en el dom entonces ya podemos generar
//la interaccion
console.log("hola desde el dom");
}
disconnectedCallback(){
//Tercer ciclo de vida esto quiere decir que estamos retirando el elemento del dom
console.log("adios del DOM");
}
}
//Definimos nuestro componente para utilizarlo como etiqueta
customElements.define("my-custome-element", MyCustomElement);
//Retiramos el elemento del dom seleccionandolo con un query selector
//Y removiendolo con la funcion remove que sirve para eliminar nodos.
document.querySelector("my-custome-element").remove();
<h4>disconnectedCallback</h4>
La ventaja de usar este método, es que si por ejemplo usamos remove() tendríamos problemas con los nodos hijos conectados al elemento a remover. Pero disconnectedCallback nos ayuda a deslindar esta conexión.
disconnectedCallback
disconnectedCallback: Se invoca cada vez que el elemento se desconecta del DOM del documento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Elements</title>
</head>
<body>
<my-custom-element></my-custom-element>
<script type="module" src="./app.js"></script>
</body>
</html>
class MyCustomElement extends HTMLElement {
constructor() {
super()
console.log('Hola desde el constructor - Memoria')
}
connectedCallback() {
console.log('Hola desde el DOM')
}
disconnectedCallback() {
console.log('Adios desde el DOM')
}
}
customElements.define('my-custom-element', MyCustomElement);
document.querySelector('my-custom-element').remove()
En el momento en que tengamos que remover un componente antes de quitarlo debemos de eliminar todas las funciones o variables propias del elemento para eso nos sirve el disconnectedCallback(){}
una vez hecho esto podemos eliminar nuestro componente del DOM con remove()
document.querySelector("etiqueta-del-componente").remove()
que diferencia a Diego si se le entiende, no como el otro curso de components que no se entiende nada
Terminamos la parte básica del ciclo de vida de los componentes, ahora vamos por los estilos.
class CustomElement extends HTMLElement {
constructor() {
super();
console.log('Hello from the constructor');
}
connectedCallback() {
console.log('Hello from the connected Callback');
}
disconnectedCallback() {
console.log('Goodbay! DOM');
}
}
customElements.define('my-custom-tag', CustomElement);
document.querySelector('my-custom-tag').remove()```
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.