Método de clase DigitalClock: connectedCallBack

ConnectedCallBack es un método de clase DigitalClock imprescindible, ya que es una etapa del ciclo de vida que te permitirá apreciar la importancia de cada uno de estos métodos dentro del desarrollo de un web component. Así pues, en este post sobre el método de clase DigitalClock vas a encontrar una serie de métodos y conceptos importantes para el desarrollo, como getAttribute, attachShadow, customElement.define o querySelector, entre otras herramientas que facilitarán la integración de un programa de código para la creación de un sitio web con componentes web o web components.

Método de clase DigitalClock

Antes de hablar de los métodos de una clase o, en este caso, de los estados del ciclo de vida de un web component, debemos tener en cuenta cómo se crea esta clase. Es decir, tenemos que hablar de los elementos que la componen, de los elementos que estarán en nuestro constructor y de la forma de definir el custom element del lenguaje de etiquetas HTML.

Este proceso lo trabajamos en un artículo para crear la clase de DigitalClock. Continuaremos a partir del punto en el que se extienden los archivos y la forma en la que se realiza el constructor, como la forma para obtener el shadow DOM o el elemento que lo encapsulará todo, así como los atributos que se integrarán.

A continuación, puedes ver el proceso anterior, en forma de código, para realizar el método de clase DigitalClock:

#en el archivo de digital-clock.js
class DigitalClock extends HTMLElement {
    constructor()  {
        super();
        this.example = this.getAttribute ('example')
        this.attachShadow ({ mode: 'open'})
   }

window.customElement.define ('digital-clock', DigitalClock)

Método connectedCallBack de DigitalClock

La creación de un template es anterior a la generación del connectedCallBack de DigitalClock, ya que esta será la que vamos a utilizar a lo largo de todo el proyecto y debe conformarse como una variable, como mostramos en el extracto de código que verás más abajo.

Primero vamos a hacer una constante de la variable de template, que puede llamarse igual, ya que está dentro del bloque de connectedCallBack. Esta constante debe duplicar el contenido de los elementos del template. Mientras tanto, para sacar el resultado del tiempo, debemos declarar la variable del current time, que es otro método de la clase que debes definir para generar el reloj digital.

Ahora bien, nosotros queremos que todos los elementos que se están creando se encapsulen dentro de shadow DOM, que será la herramienta que los almacene todos y evite que se tenga un acceso sencillo a estos elementos. Es por eso que, a continuación, vamos a encontrarnos con conceptos como shadowRoot.

De esta manera, también tenemos que utilizar el querySelector para copiar y obtener los elementos que se pinten en h1 y p de nuestra plantilla inicial.

Por último, como debemos realizar un reloj digital, debemos pensar en los intervalos que se pueden manejar con las horas, segundos y milisegundos. Por tanto, declaramos esta variable y, dentro de ella, exponemos la constante para el tiempo actual, así como otro querySelector que nos ayude a obtener lo que necesitamos del h1 de la plantilla.

A continuación, podrás ver el extracto de código de todos los procesos que acabamos de explicarte en este apartado:

const templateElement = document.createElement ('template')

templateElement.innerHTML =
<style>
    h1 {
      color: blue;
  }
</style>

<h1> </h1>


connectedCallBack()  {
     const template = templateElement.content.cloneNode {true}
     const currentTime = this.calculateCurrentTime()

     template.querySelector ('h1').textContent = currentTime
     template.querySelector  ('p').textcontent = this.example

setInterval/ {} =>  {
      const currentTime = this.calculateCurrentTime { }
      this.shadowRoot.querySelector ('h1').textContent = CurrentTime
}, 1000);
   

¿Cuál es el siguiente paso?

Ahora que conoces cómo se construye un método de clase DigitalClock, como connectedCallBack, es posible que quieras saber más sobre el resto de métodos o etapas del ciclo de vida de los web components. Si deseas continuar explorando este y otros temas relacionados con el desarrollo web, te invitamos a unirte a nuestra formación intensiva en Desarrollo Web Full Stack Bootcamp. Es una oportunidad que no puedes dejar pasar, ya que ¡cambiará tu futuro laboral!