如何将javascript文件导入到Vaadin 14 LitElement组件中

如何将JavaScript库文件包含到Vaadin 14中的LitElement模板组件中？我想加载一个文件，并在组件附加到组件层次结构时自动执行它。

LitElement文件是普通的JS模块，因此您可以使用导入关键字导入库或方法

import {foo} from 'library';

export class MyComponent extends LitElement {
  ...
}

---

如果您希望加载外部库并在LitElement中使用它，但也要在Java中管理它，则可以构建Java类：

@JsModule("./my-test-component.ts")
@Tag("my-test-component")
public class MyTestComponent extends Component {

    public MyTestComponent() {
    }


    public String getTest() {
        return getElement().getProperty("test");
    }

    public void setTest(String test) {
        getElement().setProperty("test", test);
    }

}

标记很重要，因为它是JavaScript/Typescript和Java之间的链接

您可以使用Typescript为Vaadin 14.5+创建LitElement，也可以仅使用JavaScript：

import {css, customElement, html, LitElement, property} from 'lit-element';


@customElement('my-test-component')
export class MyTestComponent extends LitElement {
    static get styles() {
        return css`
        :host {
            display: block;
        }
        `;
    }
    @property({ attribute: true })
    public test: String = "test";

    /**
     * Main method of the component
     *
     */
    render() {
        return html`Test attribute ${this.test}"`;
    }

}

在这种情况下，它与外部库没有任何关系。

---

下一步是阅读外部库的文档并按照说明进行操作。

请添加您尝试的代码以及失败的原因，例如错误、堆栈跟踪、日志等。。。所以我们可以改进它。