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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
class ExampleSlots extends HTMLElement{ constructor(){ super(); } connectedCallback(){ this.render(); } render(){ this.attachShadow({mode: 'open'}) this.shadowRoot.innerHTML = ` `; } } 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
class ExampleSlots extends HTMLElement{ constructor(){ super(); } connectedCallback(){ this.render(); } render(){ this.attachShadow({mode: 'open'}) this.shadowRoot.innerHTML = ` `; } } customElements.define('example-slots', ExampleSlots) |
En nuestro HTML, lo insertamos asi:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible" content="IE=edge"> name="viewport" content="width=device-width, initial-scale=1.0"> slot="title">Titulo 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. |
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:
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta