今天来研究一下如何在Angular应用中集成Lit Element。Lit Element是一个轻量级的Web Component库，基于标准的Web Component API，因此可以在任何支持Web Component的框架中使用，比如React、Vue、Angular等。

使用Angular CLI创建Angular项目

如果你已经安装了Angular CLI，可以直接使用以下命令创建一个新的Angular项目：

1	ng new lit_element-app-angular

如果你没有安装过Angular CLI，也没关系，可以使用以下命令创建Angular项目：

1	npx @angular/cli@latest new lit_element-app-angular

在cli创建项目的过程中可能会提示你选择CSS预处理器，我们直接选择CSS即可，CLI还会询问是否启用服务端渲染，我们选择否。

安装Lit Element依赖

待项目创建好以后，我们使用如下命令用VSCode打开项目，首先使用cd lit_element-app-angular进入项目目录，然后使用code .表示用VSCode打开当前目录。

1 2	cd lit_element-app-angular code .

打开VSCode中的Terminal，运行以下命令安装lit

1	npm install lit

创建Lit Element组件

在src目录下创建一个components目录，然后在components目录下创建一个my-element.ts文件，内容如下：

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

@customElement('my-element')
export class MyElement extends LitElement {
  @property({ type: String }) name = 'World';

  static override styles = css`
    :host {
      display: block;
      padding: 16px;
      color: var(--my-element-text-color, black);
    }
  `;

  override render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

使用my-element组件

首先：在src/app/app.component.ts中引入my-element.ts并添加CUSTOM_ELEMENTS_SCHEMA，代码如下：

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import '../components/my-element'; // 引入my-element组件
@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // 添加CUSTOM_ELEMENTS_SCHEMA
})
export class AppComponent {
  title = 'lit_element-app-angular';
}

然后：在src/app/app.component.html中使用my-element组件：

1 2	<my-element name="World"></my-element> <router-outlet />

更新tsconfig设置

打开项目根目录下（package.json所在目录）的tsconfig.app.json文件，添加以下配置：

{
  "compilerOptions": {
    "experimentalDecorators": true, 
    "useDefineForClassFields": false
  }
}

运行项目

1	npm run start

在浏览器中访问http://localhost:4200，你应该能看到如下效果：

1	Hello, World!

话说Angular集成Lit简直是分分钟的事，比React简单太多了。为什么国内用Angular的人这么少呢？不理解…

Philip

如何在Angular应用中使用Lit Element