lit-html 和 lit-element 一起使用代码

import { LitElement, html } from 'lit-element';
import { until } from 'lit-html/directives/until.js';
import { fetchJSON } from './utils.js';

class MyElement extends LitElement {

static get properties() {
return {
data: { type: Array }
};
}

constructor() {
super();
this.data = [];
}

async connectedCallback() {
super.connectedCallback();
this.data = await this.loadData();
}

async loadData() {
const response = await fetchJSON('/data.json');
return response.data;
}

render() {
return html`
<h1>Hello World!</h1>
${until(this.renderData(), html`<p>Loading...</p>`)}
`;
}

renderData() {
return html`
<ul>
${this.data.map(item => html`<li>${item.name}</li>`)}
</ul>
`;
}

}

customElements.define('my-element', MyElement);