Template personalizado en un webcomponent

Hola a todos, hoy os voy a explicar como insertar HTML y CSS en un webcomponent.

Cada webcomponent debería tener una estructura HTML y estilos propios.

La forma que la haremos es la siguiente:

  • Crearemos una función que llamaremos render (sin parámetros), se puede llamar como se quiera pero para unificar lo llamaremos asi.
  • Llamaremos a this.attachShadow({ mode: “open” });
  • Dentro de this.shadowRoot.innerHTML, insertamos una etiqueta style con los estilos y el HTML que necesitemos.
  • Llamamos a la función render dentro de la función connectedCallback.

Veamos un ejemplo:

class RenderExample extends HTMLElement {

    constructor() {
        super();
    }

    connectedCallback() {
        this.render();
    }
    
    render() {
        
        this.attachShadow({ mode: "open" });
        this.shadowRoot.innerHTML = `
        <style>
            .container {
                background: #000;
                border: 1px solid #FFF;
                color: #FFF;
                width: 200px;
                height: 100px;
            }
            .container p {
                font-size: 24px;
                margin: 0;
            }
        </style>
        <div class="container">
           <p>Texto 1</p>
           <p>Texto 2</p>
        </div>
        `;

    }

}

customElements.define('ddr-render-example', RenderExample);

Este es el resultado:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *