`@ckb-ccc/connector` 提供一个原生 [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)，无需任何 JavaScript 框架即可渲染 CCC 的钱包选择界面。`@ckb-ccc/connector-react` 以此包为基础构建。
## 适用场景 [#适用场景]
在纯 HTML 页面、原生 JS 项目，或 React 以外的框架中需要钱包连接能力时，使用 `@ckb-ccc/connector`。如果你正在开发 React 应用，建议使用 [`@ckb-ccc/connector-react`](./connector-react.mdx)——它在本包基础上封装了 React 绑定。
## 安装 [#安装]
```bash
npm install @ckb-ccc/connector
```
```bash
yarn add @ckb-ccc/connector
```
```bash
pnpm add @ckb-ccc/connector
```
## `WebComponentConnector` 类 [#webcomponentconnector-类]
核心导出是 `ccc.WebComponentConnector`——自定义元素的底层类。将元素注册并添加到 DOM 后，即可渲染钱包选择界面。
```typescript
import { ccc } from "@ckb-ccc/connector";
// connector 元素
const connector: ccc.WebComponentConnector;
connector.client; // 当前 ccc.Client
connector.wallet; // 已连接的 ccc.Wallet | undefined
connector.signer; // ccc.SignerInfo | undefined
connector.disconnect(); // 断开当前钱包连接
connector.setClient(newClient); // 切换网络
```
## 在纯 HTML 中使用 [#在纯-html-中使用]
```html
```
## 配合打包工具使用（原生 JS/TS） [#配合打包工具使用原生-jsts]
```typescript
import { ccc } from "@ckb-ccc/connector";
// 导入本包后，自定义元素会自动注册。
const connector = document.querySelector("ccc-connector") as ccc.WebComponentConnector;
// 显示钱包选择界面
connector.style.display = "";
// 监听事件
connector.addEventListener("close", () => {
connector.style.display = "none";
});
connector.addEventListener("willUpdate", () => {
console.log("已连接钱包：", connector.wallet?.name);
console.log("Signer：", connector.signer);
});
// 切换至主网
connector.setClient(new ccc.ClientPublicMainnet());
```
## 与 `@ckb-ccc/connector-react` 的对比 [#与-ckb-cccconnector-react-的对比]
| 特性 | `@ckb-ccc/connector` | `@ckb-ccc/connector-react` |
| ------- | -------------------- | ---------------------------- |
| 框架依赖 | 无（Web Component） | React |
| 集成方式 | DOM 事件 | `Provider` + `useCcc()` Hook |
| 状态管理 | 手工监听 DOM 事件 | React Context，响应式 |
| Peer 依赖 | — | `react >= 16` |
`@ckb-ccc/connector-react` 使用 `@lit/react` 对本 Web Component 进行封装。所有钱包集成（JoyID、MetaMask、Nostr、BTC 系钱包等）均通过同一底层 connector 元素接入。
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ckbccc.com/llms.txt
> Use this file to discover all available pages before exploring further.