https://www.drommekjokkenet.no/UI/js/lottie-player.js

1import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";
2
3// Define the custom element for dotLottie
4class LottiePlayer extends HTMLElement {
5  constructor() {
6    super();
7    this.canvas = document.createElement("canvas");
8    this.canvas.style.width = "100%";
9    this.canvas.style.height = "auto";
10    this.attachShadow({ mode: "open" }).appendChild(this.canvas);
11  }
12
13  connectedCallback() {
14    this.canvas.width = this.getAttribute("width") || "300";
15    this.canvas.height = this.getAttribute("height") || "300";
16    const src = this.getAttribute("src");
17
18    if (src) {
19      new DotLottie({
20        autoplay: true,
21        loop: true,
22        canvas: this.canvas,
23        src: src,
24      });
25    }
26  }
27}
28
29// Register the custom element
30customElements.define("lottie-player", LottiePlayer);