I created a header element which at its initial state shows loading
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);
};
I'm calling it like so:
(function(){
FmHeader();
setTimeout(() => {
FmHeader({data: 'some data from server'});
}, 1000);
})()
I understand the error - that the same element can't be redefined. But is there a way to achieve something like this?
A basic code pen version
Add content to Web Components with data-attributes, and <slot> (only in shadowDOM)
Attributes are only available in the connectedCallback, as the constructor can run when the Element is not in the DOM (eg. document.createElement("my-artist")
Multiple styling options, see: ::slotted CSS selector for nested children in shadowDOM slot
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>note how the slot order is maintained (see John)
George does not show the default some facts here, because the <my-artist> innerHTML contains spaces (and linebreaks); which get slotted to the default/unnamed <slot>