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

以下是一个示例使用 lit-html 和 lit-element 一起创建一个简单的自定义元素：

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

class MyElement extends LitElement {
  static get properties() {
    return {
      name: { type: String }
    };
  }

  constructor() {
    super();
    this.name = 'World';
  }

  render() {
    return html`
      <h1>Hello, ${this.name}!</h1>
      <button @click=${this.handleClick}>Change Name</button>
    `;
  }

  handleClick() {
    this.name = 'Lit-HTML';
  }
}

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

在上面的代码中，我们首先通过 `import` 引入了 `LitElement` 和 `html`，然后定义了一个名为 `MyElement` 的自定义元素类。在 `MyElement` 类中，我们定义了一个 `name` 属性，并在 `constructor` 中初始化为 `'World'`。

在 `render` 方法中，我们使用 `html` 模板字符串来创建渲染内容。通过 `${this.name}` 将 `name` 属性的值插入到模板字符串中。我们还添加了一个 `button` 元素，当按钮被点击时会调用 `handleClick` 方法。

在 `handleClick` 方法中，我们将 `name` 属性的值更改为 `'Lit-HTML'`。

最后，我们使用 `customElements.define` 方法将自定义元素注册为 `my-element`。

现在，我们可以在 HTML 中使用 `<my-element></my-element>` 元素，并且它将呈现为一个带有“Hello, World!”标题和一个“Change Name”按钮的元素。点击按钮后，标题将更改为“Hello, Lit-HTML!”。