Lit Element是一款基于Web Component的轻量级库，今天来学习一下如何在原生JavaScript中使用Lit Element。

使用Vite创建项目

首先我们使用Vite创建一个原生JavaScript项目，在命令行下运行如下命令：

1	npm create vite@latest my-lit-element-app --template vanilla

执行这条命令后，Vite会询问用户选择一个模板，我们选择vanilla模板。接下来，Vite会询问我们使用JavaScript还是TypeScript，我们选择JavaScript。

然后执行如下命令进入项目目录并安装依赖。

1 2	cd my-lit-element-app npm install

安装Lit Element

运行以下命令来安装lit。

1	npm install lit

创建Lit Element组件

在项目的src目录下创建一个新的文件夹components，然后在该文件夹下创建一个新的文件my-element.js，并添加以下代码：
在下面的代码中，我们创建了一个名为my-element的自定义元素，它继承自LitElement。

import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import { property } from 'lit/decorators.js';

class MyElement extends LitElement {
  render() {
    return html`<h1>Hello, ${this.name}!</h1>`;
  }
}
customElements.define('my-element', MyElement);

使用Lit Element组件

在src/main.js中导入我们刚刚创建的组件，并在页面中使用它：

import './style.css';
import './components/my-element.js';

const app = document.querySelector('#app');
app.innerHTML = `
  <my-element></my-element>
`;

在上面的代码中，我们在页面中使用了my-element组件，使用web component就是使用普通的html标签一样。

运行项目

删除项目中的src/counter.js文件，因为我们不需要它们。
最后，在命令行中运行以下命令来启动开发服务器：

1	npm run dev

然后在浏览器中打开http://localhost:5173，页面上显示Hello, world!。

Vanilla JavaScript中无法使用装饰器

需要注意的是，如果你使用原生JS开发Lit Element组件，是不能使用装饰器的，至少目前的JS还不支持，比如下面这些装饰器都无法使用：

@customElement
@property
@state

如果你使用了这些装饰器，浏览器会报错，以@customElement为例，报错信息如下：

1	my-element.js:5 Uncaught SyntaxError: Invalid or unexpected token (at my-element.js:5:1)

一个代替的方案是使用如下的方式：下面的代码中，我们使用了static properties来定义属性，使用constructor来初始化属性。
需要注意的是@click - 这是Lit的模板中的事件绑定语法，而非装饰器，所以@click是可以被原生JS支持的，有Lit在运行是转义为addEventListener来实现的。

import { LitElement, html } from 'lit';

class MyElement extends LitElement {
  static properties = {
    name: { type: String }, // 替代 @property({ type: String }) name = 'Philip';
    count: { state: true }, // 替代 @state() private count = 0;
  };

  constructor() {
    super();
    this.name = 'Philip';
    this.count = 0;
  }

  render() {
    return html`
      <p>Hello, ${this.name}!</p>
      <button @click=${() => this.count++}>Count: ${this.count}</button>
    `;
  }
}

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

@是Lit用作事件绑定的语法，除了@click，还有@input、@change、@submit等事件绑定语法。