Web Components（Lit）并不完美：真实缺点与避坑指南

在前面的文章里已经把 Lit 夸得够多了。

但如果只讲优点，那这套东西在真实项目里一定会翻车。

所以这篇只做一件事：

把 Web Components / Lit 在真实工程中的"坑"一次性讲清楚。

不是为了劝退，而是为了用得更稳。

一、先给结论（IImportant）

Lit 非常强，但它不是"万能解"。
如果用错场景，体验会比 Vue / React 更差。

理解缺点，才是真正会用。

二、最大的问题：生态与心智模型

2.1 Web Components ≠ 前端主流心智

现实情况是：

大多数前端工程师
→ 习惯 Vue / React
对浏览器原生模型
→ 理解不深

结果就是：

写 Lit 的人少，
真正"写对"的人更少。

2.2 常见误区

× 把 Lit 当成「轻量版 Vue」

× 在组件里写复杂业务逻辑

× 期待类似 hooks / composition API

× 用"框架思维"而不是"浏览器思维"

三、Shadow DOM 是优势，也是坑

3.1 样式隔离的代价

Shadow DOM 的优点你已经知道了：

样式不冲突
天然隔离

但代价是：

全局样式进不来
reset / normalize 失效
第三方样式库无法直接套用

3.2 常见踩坑场景

css 复制代码

button {
  font-family: inherit;
}

在 Shadow DOM 中：

inherit 的来源不是 document，而是 :host

很多 UI 不一致问题，源头都在这里。

3.3 规避策略

✔ 使用 CSS Variables

✔ 明确设计 Token 层

✔ 不依赖全局样式假设

四、表单与受控组件：一个经典难点

4.1 Web Components 与表单并非天然融合

例如：

html 复制代码

<form>
  <ui-input name="username"></ui-input>
</form>

默认情况下：

表单并不会收集 Web Component 的值

4.2 解决方案：Form Associated Custom Elements

ts 复制代码

static formAssociated = true

但注意：

浏览器支持不完全
实现复杂
心智成本高

4.3 工程建议

复杂表单，不要完全依赖 Web Components

可以：

组件提供 UI
表单逻辑由框架层接管

五、事件系统的"反直觉点"

5.1 React 用户最容易踩的坑

tsx 复制代码

<ui-button onClick={handler} />

在 React 中：

× 并不总是生效

因为：

React 的合成事件系统
对 CustomEvent 支持有限

5.2 正确做法

ts 复制代码

useEffect(() => {
  ref.current.addEventListener('click', handler)
}, [])

或者：

使用属性回调
或封装一层 React Wrapper

六、SSR 与 Web Components 的现实差距

6.1 理论 vs 现实

理论上：

Web Components 支持 SSR
Lit 也提供 SSR 工具

现实是：

工程复杂
学习成本高
与主流 SSR 框架整合度一般

6.2 工程建议（Very Realistic）

如果你的核心诉求是 SEO + SSR，
Lit 不一定是最优解。

但如果是：

组件库
Design System
B 端系统

→ 问题不大。

七、调试体验不如主流框架

7.1 没有 DevTools 红利

对比一下：

框架	调试体验
React	React DevTools
Vue	Vue DevTools
Lit	浏览器 DevTools

这意味着：

状态全靠 console
生命周期靠理解
问题定位偏底层

7.2 这是缺点，也是优点

你看到的是"真实 DOM"，
而不是框架幻象。

八、性能不是"无敌"的

8.1 Lit 很快，但不是所有场景最快

Lit 的优势在于：

精准更新
低内存占用

但在：

高频大列表
强动画场景

React / Vue + 优化方案

→ 依然有优势。

九、什么时候千万不要用 Lit？

请直接记住这几条：

× 业务驱动型 SPA

× 强状态流转系统

× 新人比例极高的团队

× 快速试错 MVP 项目

十、什么时候 Lit 是"最优解"？

✔ Design System

✔ 基础 UI 组件库

✔ 跨框架复用

✔ 微前端基础设施

✔ 长期维护项目

十一、一个 IImportant 认知升级

Lit 的难点不在 API，
而在你是否理解浏览器本身。

如果你：

熟悉 DOM
理解事件模型
了解 CSS 作用域
接受"少即是多"

Lit 会非常顺手。

十二、最后

Web Components / Lit 不是"下一代前端框架"，
而是"另一条技术路线"。

它不会取代 Vue / React，

但在它擅长的领域里，几乎没有对手。