推荐几个关于 Web Components常用的框架1. Lit (LitElement) 简介：Lit 是一个轻量级的

1. Lit (LitElement)

简介：Lit 是一个轻量级的 Web Components 框架，它通过简洁的 API 和最小的依赖性，让你快速开发和渲染高效的 Web Components。

使用方法：

安装 Lit：
```
npm install lit
```

创建一个 LitElement 组件：

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

class MyComponent extends LitElement {
  static styles = css`
    p {
      color: blue;
    }
  `;

  render() {
    return html`<p>Hello, World!</p>`;
  }
}

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

在 HTML 中使用：
```
<my-component></my-component>
```

详细文章：

2. Stencil

简介：Stencil 是一个生成 Web Components 的编译器，允许你用现代的语法和工具开发高度优化的 Web Components，特别适合使用 TypeScript 的项目。

使用方法：

安装 Stencil：
```
npm init stencil
```

创建一个组件：

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  @Prop() name: string;

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

编译后在 HTML 中使用：

<my-component name="World"></my-component>

详细文章：

3. Svelte

简介：虽然 Svelte 不是专门为 Web Components 而生，但它可以编译成 Web Components，让你使用其简洁的语法来创建高度优化的组件。

使用方法：

安装 Svelte：

npx degit sveltejs/template svelte-app
cd svelte-app
npm install

创建一个组件并编译为 Web Component：

<script>
  export let name = 'World';
</script>

<p>Hello, {name}!</p>

配置编译为 Web Components：在 rollup.config.js 中添加：
```
svelte({
  customElement: true,
})
```

详细文章：

4. Vanilla Web Components (无需框架)

简介：你可以不使用任何框架，直接使用原生的 Web Components API 来构建组件。

使用方法：

创建一个简单的 Web Component：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `<p>Hello, World!</p>`;
  }
}

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

详细文章：

你可以根据项目需求选择合适的框架，希望这些资源对你有帮助！