Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

disconnectedCallback

14/22
Recursos

Aportes 9

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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();

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()
<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.

Documentación de los callbacks de ciclo de vida

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()```