<lottie-player>

lottie-player.ts

import lottie from './lib/lottie-import.js';

export class LottiePlayerElement extends HTMLElement {

  get src(): string | null {
    return this.getAttribute('src');
  }

  set src(v: string | null) {
    if (v == null) {
      this.removeAttribute('src');
    } else {
      this.setAttribute('src', v);
    }
  }

  get loop(): boolean {
    return this.hasAttribute('loop');
  }

  set loop(v: boolean) {
    if (v === true) {
      this.setAttribute('loop', '');
    } else {
      this.removeAttribute('loop');
    }
  }

  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot!.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
          height: 100%;
        }
        div {
          width: 100%;
          height: 100%;
        }
      </style>
      <div></div>
    `;
  }

  connectedCallback() {
    this._load();
  }

  private _load() {
    lottie.loadAnimation({
      wrapper: this.shadowRoot!.querySelector('div'),
      animType: 'html',
      loop: this.loop,
      prerender: true,
      autoplay: true,
      path: this.src,
    });
  }

  attributeChangedCallback(name: string, _oldValue: string, _newValue: string) {
    if (name === 'src' || name === 'loop') {
      this._load();
    }
  }

}
customElements.define('lottie-player', LottiePlayerElement);