使用Vite+ Lit 构建webcomponent 组件

凌乱风雨12112025-12-28 16:02

使用 Vite + Lit 构建 WebComponent 组件

初始化项目

创建一个新的 Vite 项目并选择适合的模板（如 vanilla 或 vanilla-ts）。运行以下命令：

复制代码

npm create vite@latest my-lit-element --template vanilla
cd my-lit-element
npm install

安装 Lit 依赖：

复制代码

npm install lit

配置 Vite

确保 Vite 配置文件支持 WebComponent 开发。在 vite.config.js 中，添加以下配置以启用自定义元素：

复制代码

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/my-component.js',
      name: 'MyComponent',
      fileName: 'my-component',
      formats: ['es']
    }
  }
});

创建 Lit 组件

在 src 目录下创建组件文件（如 my-component.js）。使用 Lit 的 html 和 css 模板标签定义组件：

复制代码

import { LitElement, html, css } from 'lit';

class MyComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
      padding: 16px;
      color: #333;
    }
  `;

  static properties = {
    message: { type: String }
  };

  constructor() {
    super();
    this.message = 'Hello, Lit!';
  }

  render() {
    return html`<div>${this.message}</div>`;
  }
}

customElements.define('my-component', MyComponent);

开发与构建

启动开发服务器：

复制代码

npm run dev

构建生产版本：

复制代码

npm run build

构建后会生成 dist 目录，包含可直接使用的 ES 模块文件。

使用组件

在 HTML 中通过模块导入方式使用组件：

复制代码

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="/src/my-component.js"></script>
  </head>
  <body>
    <my-component message="Custom Message"></my-component>
  </body>
</html>

可选：TypeScript 支持

若使用 TypeScript，安装类型定义并更新组件文件为 .ts：

复制代码

npm install --save-dev @types/webcomponents @types/trusted-types

示例 TypeScript 组件：

复制代码

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

@customElement('my-component')
export class MyComponent extends LitElement {
  @property({ type: String }) message = 'Hello, Lit!';

  static styles = css`
    :host {
      display: block;
      padding: 16px;
    }
  `;

  render() {
    return html`<div>${this.message}</div>`;
  }
}

注意事项

确保组件名称包含连字符（如 my-component），符合 WebComponents 规范。
使用 :host 选择器定义组件根样式。
通过 static properties 或装饰器声明属性以支持响应式更新。