Slots en web components

18/08/20210 comentarios

Hola a todos, hoy os voy a explicar como funcionan los slots en webcomponents.

Los slots en webcomponents sirven para que nosotros podamos poner nuestro propio contenido en un webcomponent en la zona que nosotros elijamos.

Vamos a crearnos un webcomponent de ejemplo:


class ExampleSlots extends HTMLElement{

    constructor(){
        super();
    }

    connectedCallback(){
        this.render();
    }

    render(){
        this.attachShadow({mode: 'open'})
        this.shadowRoot.innerHTML = `            
             <div>
                <h1 class="title">
                   <!--Aqui quiero meter contenido desde fuera-->
                </h1>
                <div class="content">
                   <!--Aqui quiero meter contenido desde fuera-->
                </div>
            </div>
        `;
    }

}

customElements.define('example-slots', ExampleSlots)

En este caso, nos interesa meter contenido desde la parte de HTML. Desde el webcomponent, usamos la etiqueta slot con un name.


class ExampleSlots extends HTMLElement{

    constructor(){
        super();
    }

    connectedCallback(){
        this.render();
    }

    render(){
        this.attachShadow({mode: 'open'})
        this.shadowRoot.innerHTML = `
              <div>
                <h1 class="title">
                    <slot name='title'></slot>
                </h1>
                <div class="content">
                    <slot name='content'></slot>                
                </div>
            </div>
        `;
    }

}

customElements.define('example-slots', ExampleSlots)

En nuestro HTML, lo insertamos asi:


<!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>Document</title>
    <script src="main.js"></script>
</head>
<body>
    
    <example-slots>
        <span slot="title">Titulo</span>
        <span slot="content">Lorem ipsum, dolor sit amet consectetur adipisicing 
            elit. Vero, quo impedit error quas ipsa dolor fugit reiciendis, libero 
            delectus saepe sint labore debitis commodi ducimus qui et nihil soluta a.
            Repudiandae exercitationem, voluptatibus veritatis doloribus distinctio laboriosam 
            autem omnis quae, cupiditate quas nam facere cumque ad eius officia molestias 
            delectus deserunt officiis natus in corporis. Quod recusandae in libero quia!
            Asperiores voluptatem sequi fugiat deserunt quisquam omnis mollitia suscipit 
            laboriosam distinctio, numquam explicabo sunt excepturi totam rerum tempora hic 
            dicta illum quia.
        </span>
    </example-slots>


</body>
</html>

Como puedes ver, usamos en la etiqueta el atributo slot con el nombre del slot que hemos puesto en el webcomponent.

Este es el resultado: