Creando nuestro primer webcomponent

17/05/20210 comentarios

Hola a todos, hoy os explicaré como podemos crear nuestro primer webcomponent.

Los Componentes Web o webcomponents son un paquete de diferentes tecnologías que te permiten crear elementos personalizados reutilizables — con su funcionalidad encapsulada apartada del resto del código — y utilizarlos en las aplicaciones web.

Si estas familiarizado con frameworks como angular, es algo parecido a los componentes.

¿Qué necesitamos para hacer webcomponents? Simplemente con Javascript, HTML y CSS.

Pues vamos a ver como hacer un webcomponent muy simple.

Nos creamos un fichero HTML y un JS.

El contenido del HTML inicialmente es:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo webcomponent</title>
    <script src="main.js"></script>
</head>
<body>

</body>
</html>

En nuestro Javascript para crear nuestro webcomponent, debemos crear una clase que herede de HTMLElement y definir la etiqueta que queremos usar.


class HelloWorld extends HTMLElement {
    
}

// Crea el webcomponent
customElements.define('hello-world', HelloWorld);

Esto quiere decir, que en el HTML, podemos usar una etiqueta <hello-world> como si fuera un elemento HTML mas.

Después, vamos a crear el constructor y como es una clase que hereda de HTMLElement debemos llamar a super().


class HelloWorld extends HTMLElement {
    constructor(){
        super();
    }
}

// Crea el webcomponent
customElements.define('hello-world', HelloWorld);

Para añadirle contenido para empezar, podemos agregarle un Shadow Root o DOM sombra, que es como una estructura DOM propia. Para se usar la función attachShadow.


class HelloWorld extends HTMLElement {
    constructor(){
        super();

        // Creamos un shadow para añadir contenido
        let shadow = this.attachShadow({ mode: 'open'});
        
        // Creamos un span
        const span = document.createElement('span');

        // Creamos un texto para un span
        const spanText = document.createTextNode('Hola mundo');
        
        // Añadimos el texto al span
        span.appendChild(spanText);

        // Añado el span al shadow
        shadow.appendChild(span);
        
    }

}

// Crea el webcomponent
customElements.define('hello-world', HelloWorld);

Creo un span y lo agrego a este shadow root, fíjate que le puse un objeto con una propiedad llamada mode, este puede ser open o closed, la diferencia entre ellos es que si esta abierto, se puede acceder a este shadow root, si esta cerrado no sé podrá acceder al mismo.

Vamos a probar, en el HTML añadimos la etiqueta:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo webcomponent</title>
    <script src="main.js"></script>
</head>
<body>
    <hello-world></hello-world>
</body>
</html>

Con esto tendríamos nuestro primer webcomponent. Vamos a añadir un elemento más, cuando pulsemos en la etiqueta, nos muestre un alert.

Para el tema de los eventos, yo recomiendo meterlos en el método connectedCallback, que se invocará cada vez que se añada al elemento, es decir al inicio.


class HelloWorld extends HTMLElement {
    constructor(){
        super();

        // Creamos un shadow para añadir contenido
        let shadow = this.attachShadow({ mode: 'open'});
        
        // Creamos un span
        const span = document.createElement('span');

        // Creamos un texto para un span
        const spanText = document.createTextNode('Hola mundo');
        
        // Añadimos el texto al span
        span.appendChild(spanText);

        // Añado el span al shadow
        shadow.appendChild(span);
        
    }

    connectedCallback(){
        // Añado evento de click
        this.addEventListener('click', function(){
            alert('Hola mundo');
        })
    }

}

// Crea el webcomponent
customElements.define('hello-world', HelloWorld);

Así se vería en el navegador.