disconnectedCallback

Curso de JavaScript: 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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 8

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Andres Felipe Pinchao Ramirez

hace 4 años

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

Brandon Argel Verdeja Dominguez

hace 2 años

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

Miguel Ángel Reyes Moreno

hace 4 años

<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

MARTIN RAMIREZ RAMIREZ

hace 2 años

que diferencia a Diego si se le entiende, no como el otro curso de components que no se entiende nada

Jose Funez

hace 3 años

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

Naldo Duran

hace 4 años

Jimmy Buriticá Londoño

hace 4 años

Terminamos la parte básica del ciclo de vida de los componentes, ahora vamos por los estilos.

Edgar Lopez Arroyo

hace 4 años

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