Creé un elemento de encabezado que en su estado inicial muestra la carga
export const FmHeader = (data) => { fetch("../../templates/fm-header/index.html") .then((response) => response.text()) .then((html) => HeaderElement(html)); }; const HeaderElement = (html, data) => { class FmHeader extends HTMLElement { constructor() { super(); var el = this.attachShadow({ mode: "open" }); el.innerHTML = html; if (data) { const artistName = el.querySelector(".artist_name"); artistName.innerText = "data.artistName;"; artistName.classList.remove("skeleton"); } } } customElements.define("fm-header", FmHeader); };Lo estoy llamando así:
(function(){ FmHeader(); setTimeout(() => { FmHeader({data: 'some data from server'}); }, 1000); })()Entiendo el error: que el mismo elemento no se puede redefinir. Pero, ¿hay alguna manera de lograr algo como esto?
Agregue contenido a los componentes web con atributos de datos y <slot> (solo en shadowDOM)
Los atributos solo están disponibles en connectedCallback , ya que el constructor puede ejecutarse cuando el elemento no está en el DOM (por ejemplo, document.createElement("my-artist")
Múltiples opciones de estilo, ver: ::selector de CSS ranurado para niños anidados en la ranura shadowDOM
customElements.define("my-artist", class extends HTMLElement { constructor() { super() .attachShadow({mode:"open"}) .innerHTML = `<style>`+ `::slotted([slot="instruments"]) { background: gold }`+ `</style>`+ `<h1 part='artistname'></h1>`+ `<div part='instruments'>Played: <slot name="instruments">No instruments specified</slot></div>`+ `<slot>some facts here</slot>`+ ``; } connectedCallback(){ this .shadowRoot .querySelector("[part='artistname']") .innerText = this.getAttribute("name"); } }); *::part(artistname){ /* style shadowDOM parts from global CSS */ font-size:1.2em; margin:0; background:blue; color:gold; } body{ font:12px Arial; /* inheritable styles DO style shadowDOM*/ } <my-artist name="John">John was my favorite! <span slot="instruments">Many instruments</span> </my-artist> <my-artist name="Paul"></my-artist> <my-artist name="George"> <span slot="instruments">drums</span> </my-artist> <my-artist name="Ringo"><span slot="instruments">drums</span></my-artist>tenga en cuenta cómo se mantiene el orden de las ranuras (ver John)
George no muestra some facts here , porque el HTML interno <my-artist> contiene espacios (y saltos de línea); que se colocan en el <slot> predeterminado/sin nombre