La función attributedChangeCallBack de web components es una etapa del ciclo de vida en la que puedes determinar los elementos que han cambiado de valor o de atributo. Es importante saber cómo integrarlo, ya que si el valor o atributo se transforma, los web components deben avisarlo. Es por eso que, además de recordar en qué consiste la función attributedChangeCallBack de web components, sobre la que hablamos en el artículo acerca del ciclo de vida, vamos a realizar un ejercicio práctico, en el que creamos el web component de Hello Word.
attributedChangeCallBack de web components
La función attributedChangeCallBack de web components es la quinta etapa que aparece dentro del ciclo de vida de un web component. En contraste con los otros estados en los que se realiza el constructor, se conecta y desconecta el callBack, la función de attributedChangeCallBack del ciclo de vida de web components es la que se encarga de controlar el momento en el que uno de los componentes de la web cambia su atributo o su valor.
De esta manera, si el web component se transforma, él mismo lo va a avisar. Por eso necesitamos instanciar esta función, ya que nos permite encontrar todos los cambios en nuestro desarrollo e instancia de los componentes web.
Ejercicio práctico con attributedChangeCallBack
Para que entiendas cómo se observa la función de attributedChangeCallBack dentro de un proyecto real, vamos a seguir explorando un ejercicio práctico anterior, donde desarrollamos un web component de HelloWorld, al instanciarlo como una clase. Para ello, primero vamos a traer el extracto inicial que creamos en dicho post. En ese ejercicio, hemos creado la clase, hemos definido el constructor de dicha clase, hemos definido la etapa de connectedCallBack y hemos registrado el elemento con el constructor necesario.
Así pues, en este extracto de código vas a ver todos los pasos que ejecutamos en una sola porción de código, la cual debe posicionarse de la siguiente forma, donde todo se unirá para hacer funcionar el web component de Hello World.
<html>
<body>
<hello-world> test= "valor de ejemplo" </hello-world>
<script>
class HelloWorld extends HTMLElement {
constructor() {
super();
console.log ('constructor');
}
}
connectedCallback() {
console.log ('connectedCallback');
this.innetHtml = 'Hello!!!'
}
window.customElement.define ('hello-world', HelloWorld")
</script>
</body>
</html>Ahora queda definir la función attributedChangeCallBack de web components. Esta se debe instanciar para controlar los cambios de atributos y valores a lo largo del uso de un proyecto y generación de los web components. Para empezar, tendremos que crear una función en la que debemos pasarle tres parámetros, que son: new, oldValue y newValue. Serán los que resultarán en el cambio dentro de la consola. La forma en la que debemos proponer este extracto de código para el web component deberá definirse como te mostramos a continuación:
#para obtener el cambio entre valores del web component
static get observedAttributes() {
return {'test'}
#declaración de la función de attributeChangedCallback
attributeChangedCallback (new, oldValue, newValue)
console.log (' ${name} changed from 4${oldvalue} to ${newvalue}')
#Lo que debes tener en cuenta para usar el elemento
<html>
<body>
<hello-world> test= "valor de ejemplo" </hello-world>
</body>
<html>Además de definir la función de attributeChangedCallback dentro del extracto de código, es necesario tener claros otros procesos. En primer lugar, deberás emplear el static get para obtener un valor determinado, que nos permitirá obtener el test, es decir, el ejemplo en el que se realizará el cambio de valores o de atributos. Para declarar este atributo, tendrás que usar la función para usar el elemento con el <hello-world> test= “valor de ejemplo” </hello-world>.
Ahora que, gracias a este ejercicio práctico, entiendes en qué consiste la función attributedChangeCallBack de web components, tendrás mucho más claro cómo desarrollar programas en los que necesites crear etiquetas HTML personalizadas o web components. No obstante, son muchos los elementos que participan en el ciclo de vida de estos conceptos y que podrías aprender en nuestra formación en Desarrollo Web Full Stack Bootcamp, que cuenta con un montón de módulos teóricos y prácticos que te convertirán en todo un profesional IT. ¡Empieza ahora y destaca en el mercado laboral!
