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.
Deja una respuesta