vendredi 31 juillet 2020

Send properties in child lit-element

I'm trying to build a web application using lit-element. I have main class named App and secondary class - popup which has properties such as time and text.

In App I have:

class App extends LitElement {
    ...
    render() {
        return html`
            <myapp-popup .time="5000" .text="this is a test"></myapp-popup>
            ...
        `;
    }
    ...
}
customElement.define('my-app', App);

In Popup:

class Popup extends LitElement {
    ...
    constructor() {
        super();
        this.display = 'show';
        setTimeout(() => this.display = 'hide', this.time);
    }
    render() {
        return html`
            <span class="pop-up ${this.display}>${this.text}</span>
        `;
    }
}
customElement.define('myapp-popup', Popup);

The problem is that in the constructor of Popup variable time is still undefined even though I passed it as a property in App.render().

How to correctly pass something into child lit-element so it will be available in child's constructor?




Aucun commentaire:

Enregistrer un commentaire