HTML component for rendering image with fallback to placeholder

cover-image.js

class CoverImage extends HTMLElement {
  /*
  Usage:
  <cover-image placeholder="placeholder.jpg">
     <img src="cover.jpg" loading"lazy">
  </cover-image>
  */
    connectedCallback() {
        const images = this.querySelectorAll("img");
        const placeholder = this.getAttribute("placeholder");

        images.forEach(image => {
            const src = image.getAttribute("src");
            if (src !== placeholder) {
                image.setAttribute("src", placeholder);

                image.addEventListener(
                    "load",
                    () => {
                        image.setAttribute("src", src);
                    },
                    { once: true },
                );
                image.addEventListener(
                    "error",
                    () => {
                        image.setAttribute("src", placeholder);
                    },
                    { once: true },
                );
            }
        });
    }
}

customElements.define("cover-image", CoverImage);