在子lit-element中发送属性

Question

我正在尝试使用lit-element构建一个web应用程序。我有名为App的主类和具有时间和文本等属性的辅助类popup。

在应用程序中，我有：

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

在弹出窗口中：

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);

问题是，在Popup的constructor中，变量time仍然是未定义的，即使我在App.render()中将其作为属性传递。

如何正确地将一些东西传递给子元素，这样它就可以在孩子的构造函数中使用？

Answer 1

我会做<myapp-popup .time=${5000} text=${"this is a test"}></myapp-popup>。注意，在属性之前使用了.。

在理想情况下，您将在元素本身上定义属性类型，并将其解析为：Number、String、Array等。Doc here

此外，您可能希望考虑使用connectedCallback生命周期方法，而不是使用构造函数(?)