Emi Matchu
e9145251a9
Oh right okay, attributes like `status="loading"` are more of an API for the caller, whereas the internal state API is where you wanna put things that are meant to be used in CSS selectors and stuff.
31 lines
729 B
JavaScript
31 lines
729 B
JavaScript
class OutfitLayer extends HTMLElement {
|
|
#internals;
|
|
|
|
constructor() {
|
|
super();
|
|
this.#internals = this.attachInternals();
|
|
}
|
|
|
|
connectedCallback() {
|
|
setTimeout(() => this.#initializeImage(), 0);
|
|
}
|
|
|
|
#initializeImage() {
|
|
this.image = this.querySelector("img");
|
|
if (!this.image) {
|
|
throw new Error(`<outfit-layer> must contain an <img> tag`);
|
|
}
|
|
|
|
this.image.addEventListener("load", () => this.#setStatus("loaded"));
|
|
this.image.addEventListener("error", () => this.#setStatus("error"));
|
|
|
|
this.#setStatus(this.image.complete ? "loaded" : "loading");
|
|
}
|
|
|
|
#setStatus(newStatus) {
|
|
this.#internals.states.clear();
|
|
this.#internals.states.add(newStatus);
|
|
}
|
|
}
|
|
|
|
customElements.define("outfit-layer", OutfitLayer);
|