WEB COMPONENTS FRAMEWORK

原生WebComponents框架

TypeScript 单文件组件，熟悉的模板语法，输出标准 Custom Elements

开始使用查看文档 GitHub

了解原理

COMPONENT FIRST

为组件而生

从定义、通信到复用，组件始终是 ElfUI 的主线。

类 Vue 模板语法

v-if、v-for、v-model 与事件绑定保持直觉，不引入 VNode。

TS 单文件组件

逻辑、模板与样式在一个 TypeScript 文件里定义，构建时完成编译。

链式编程扩展

需要 builder 或运行时字符串模板时，再引入 @elfui/chain。

无虚拟 DOM

静态结构在构建阶段确定，运行时不做整棵树 diff 或 patch。

组件继承

从基础组件派生设计系统变体，复用定义而非复制实现。

原生 Web Components

输出标准 Custom Elements，可在任何前端栈中注册与使用。

COMPONENT INHERITANCE

一份 Button 定义，派生两种组件风格

复用模板、交互和基础样式，只针对新组件补充语义或设计令牌。

Button.variants.ts

import { useExtend, useVariant } from "@elfui/core";

export const PrimaryButton = useExtend(Button)
  .name("primary-button")
  .build();

export const DangerButton = useVariant(
  Button, "danger-button", setDangerTone
).build();

<elf-button>

共享 props、事件与基础样式

useExtend()<primary-button>

语义组件

改名并补充局部样式，得到职责明确的按钮。

useVariant()<danger-button>

设计系统变体

沿用 Button 能力，只改颜色令牌与视觉语义。

ARCHITECTURE

集百家所长

借鉴成熟的开发体验，同时把边界收敛到带模板体验的原生 Web Components。

维度	ElfUI	Vue	React	Lit	Solid
更新模型	编译期细粒度 DOM 更新	响应式 + VDOM	VDOM 协调	模板 part 更新	细粒度 DOM 更新
主要写法	TS + HTML 模板宏	SFC 模板	JSX	模板字面量	JSX
运行时	无 VNode / 无 patch	组件运行时	协调器运行时	轻量模板运行时	细粒度运行时
输出形式	标准 Custom Elements	Vue 组件	React 组件	Web Components	JSX 组件
组件边界	浏览器原生标签	框架组件	框架组件	浏览器原生标签	框架组件

SIZE SNAPSHOT

按需选择入口

10.52 KB@elfui/coregzip，不含 runtime compiler

15.00 KBcore + routergzip，包含路由入口

21.19 KB@elfui/chaingzip，包含 runtime compiler

BROWSER BENCHMARK

真实浏览器中位数

1.10 ms挂载 300 个组件

1.50 ms创建 1k 列表

0 KB内存释放 smoke 留存

体积来自 2026-07-11 的发布前 size report；基准来自同日真实浏览器 smoke。它们用于追踪 ElfUI 自身回归，不是跨框架性能排名。

CORE PRINCIPLES

核心原理

构建时拆分动态点。运行时没有 VNode，也不需要整棵组件树 diff。

Counter.ts

import { defineHtml, useRef }
  from "@elfui/core";

const count = useRef(0);
const increment = () =>
  count.set(count.peek() + 1);

export const Counter = defineHtml(`
  <button @click=${increment}>
    Count: ${count}
  </button>
`);

模板解析

识别文本、属性、事件、条件与列表。

动态点拆分

为每个状态读取生成独立更新路径。

Effect 绑定

只订阅当前动态点真正读取的状态。

原生输出

写入真实 DOM，注册为 Custom Element。

0 VNode直接更新真实 DOM

Fine-grained每个动态点独立订阅

Custom Elements标准浏览器输出

ECOSYSTEM

生态链

@elfui/core

宏组件、应用挂载与主线用户 API。

Vite Plugin

编译 TypeScript 宏组件并提供工程诊断。

Chain

链式 builder 与运行时字符串模板扩展。

Language Tools

VS Code 补全、诊断与宏组件开发体验。

START EXPLORING

开始探索 ElfUI

安装主包和编译插件，写下第一个宏组件。

快速开始 GitHub ↗

terminal

$ npm i @elfui/core
$ npm i -D @elfui/vite-plugin