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:
|
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 29 30 31 32 33 34 35 36 37 38 |
class RenderExample extends HTMLElement { constructor() { super(); } connectedCallback() { this.render(); } render() { this.attachShadow({ mode: "open" }); this.shadowRoot.innerHTML = ` Texto 1 Texto 2 `; } } 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