Atributos en webcomponents

19/05/20210 comentarios

Hola a todos, hoy os voy a enseñar como podemos gestionar atributos en nuestros webcomponents.

En webcomponents tenemos atributos que podemos utilizar como entrada de valores de nuestro webcomponent.

Vamos a usar este webcomponent de base.

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

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

        // Creamos un texto para un span
        const buttonText = document.createTextNode('Mostrar mensaje');
        
        // Añadimos el texto al span
        button.appendChild(buttonText);

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

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

}

// Crea el webcomponent
customElements.define('show-message', ShowMessage);

class ShowMessage extends HTMLElement {

constructor(){

super();

// Creamos un shadow para añadir contenido

let shadow = this.attachShadow({ mode: 'open'});

// Creamos un span

const button = document.createElement('button');

// Creamos un texto para un span

const buttonText = document.createTextNode('Mostrar mensaje');

// Añadimos el texto al span

button.appendChild(buttonText);

// Añado el span al shadow

shadow.appendChild(button);

}

connectedCallback(){

// Añado evento de click

this.addEventListener('click', function(){

alert(this.value);

})

}

// Crea el webcomponent

customElements.define('show-message', ShowMessage);

A la etiqueta «show-message» le podemos poner atributos que queramos, por ejemplo:

<!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 atributos</title>
    <script src="main.js"></script>
</head>
<body>
    <show-message value="Mensaje"></show-message>    
</body>
</html>

lang="en">

charset="UTF-8">

http-equiv="X-UA-Compatible" content="IE=edge">

name="viewport" content="width=device-width, initial-scale=1.0">

</span><span class="crayon-i ">Ejemplo atributos</span><span class="crayon-r ">

value="Mensaje">

Para obtener un atributo, usamos getAttribute y el nombre del atributo y con setAttribute podemos recogerlo y setearlo. Lo añadimos:

get value() {
    return this.getAttribute('value');
}

set value(value) {
    this.setAttribute('value', value);
}

get value() {

return this.getAttribute('value');

}

set value(value) {

this.setAttribute('value', value);

}

Quedando así:

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

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

        // Creamos un texto para un span
        const buttonText = document.createTextNode('Mostrar mensaje');
        
        // Añadimos el texto al span
        button.appendChild(buttonText);

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

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

    get value() {
        return this.getAttribute('value');
    }

    set value(value) {
        this.setAttribute('value', value);
    }

}

// Crea el webcomponent
customElements.define('show-message', ShowMessage);