Search code examples
web-componentstenciljs

How to call a method on athird-party component in stenciljs

I am using LottiePlayer from this lib in my stencilJs app

In the doc they mentioned:

You may set and load animations programatically as well.

</lottie-player>
const player = document.querySelector("lottie-player");
player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");

// or load via a Bodymovin JSON string/object
player.load(
 '{"v":"5.3.4","fr":30,"ip":0,"op":38,"w":315,"h":600,"nm":"new", ... }'
);

Now in my stencil component I am doing

import * as lottiePlayer from "@lottiefiles/lottie-player";


@Component({
    tag: "welcome-page",
    styleUrl: "welcome-page.scss",
    shadow: true,
})
export class WelcomePage {
    private lottie: lottiePlayer.LottiePlayer;

    animate(): void {
        console.log(this.lottie);
        this.lottie.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");
    }

    render(): any {
        return (
            <Host>
               <lottie-player
                    ref={(el) => this.lottie = el}
                    autoplay
                    mode="normal"
                    style={{ width: "300px", height: "300px" }}
                >
                </lottie-player>
                <idv-button
                            buttonType="primary"
                            onClick={this.animate.bind(this)}>
                            Animate
                </idv-button>
             </Host>
          );
      }

When I run I get a reference to the html element, but it's not of type of LottiePlayer s I can call a method on it.

enter image description here

also I did this, but player is null

    animate(): void {
        const player: lottiePlayer.LottiePlayer = document.querySelector("lottie-player");
        player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");
    }

How can I solve this issue?

Solution

  • I solved it like this, in case someone else has same problem

    
    @Element() el;

    ...
  
    animate(): void {
        let element: any = this.el.shadowRoot.querySelector("lottie-player");

        if (element) {
            element.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");
        }
    }