¿Quieres crear la clase DigitalClock para web components? En este artículo te queremos ayudar en el proceso de aumentar tus conocimientos y ejercitar tus habilidades con un nuevo ejercicio práctico. Sigue leyendo este post y aprende a desarrollar la clase DigitalClock para web components.
Clase DigitalClock Web Components
La clase DigitalClock Web Components que vamos a definir en este ejercicio práctico nos va a permitir entender cómo podemos iniciar un web component y qué tipo de elementos debemos integrar para desarrollar este proceso.
Por tanto, vamos a realizar varios ejercicios dentro de uno mismo, como definir la clase, definir un constructor y, por último, registrarlo, para que pueda usarse cuando desarrollemos el resto de funciones del ciclo de vida de un web component.
Definir clase y constructor y registrarlo
En primer lugar, tendremos que tener claro que vamos a definir la clase de un DigitalClock, las cual nos va a ayudar a instanciar un web component que almacene un reloj, con todos sus elementos, sobre la pantalla de un sitio web.
Así pues, vamos a definir una clase dentro de un archivo de JavaScript y vamos a extenderla a partir de un elemento del lenguaje de etiquetado de HTML. Cuando la hayamos declarado, debemos tener un constructor, que siempre deberá instanciarse con el método super, para evocar el elemento padre dentro del constructor.
A su vez, tendrás que registrar esta clase, que se convertirá en el web component. Por tanto, debemos emplear el método de definir el custom element: window.customElement.define. A este le pasaremos dos parámetros: el nombre del archivo y el nombre del web component.
#en el archivo de digital-clock.js
class DigitalClock extends HTMLElement {
constructor() {
super()
}
}
window.customElement.define ('digital-clock', DigitalClock)Importar el script
Además de definir la clase DigitalClock para web components, tendrás que importar este archivo o script de JavaScript en tu archivo de HTML, pues es la manera de tener ambos elementos para la creación de un reloj digital en uno solo. Por tanto, tendrás que emplear la etiqueta del lenguaje de etiquetas <script> </script> y copiar la ruta completa del archivo de JavaScript que almacena la clase, los constructores y las funciones, entre otros elementos importantes para la creación del web component.
<html>
<body>
<h1> use your digital-clock here! </h1>
</body>
<script type = "module" src = "./digital-clock.js"> </script>
</html>¿Qué pasa ahora?
Con este ejercicio práctico para construir la clase DigitalClock para web components puedes crear un web component que funcione como un reloj. Si quieres seguir ejercitando tus habilidades tecnológicas y ampliar tus conocimientos, puedes hacerlo con nuestro Desarrollo Web Full Stack Bootcamp. A través de distintos módulos, te formarás en los temas y herramientas más importantes dentro del desarrollo web a nivel tanto teórico como práctico. ¡Solicita más información y apúntate para cambiar tu vida!
