Template personalizado en un web components

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.