Web Components 回来了——你的项目真的需要 React/Vue 吗？

2026 年，越来越多的项目开始"去框架化"，直接用 Web Components + 原生 JavaScript 构建应用。这不是极客的偏执，而是浏览器原生能力成熟之后的理性回归。

Web Components 不是一个新的框架或库。它是一组浏览器原生支持的 Web 标准 API，让你能创建可复用的自定义 HTML 标签——就像 <video>、<input> 一样，但由你定义。

一、Web Components 到底是什么？

1. Custom Elements（自定义元素）

让你能注册自己的 HTML 标签。比如 <product-card>、<my-button>、<app-header>。

// 定义一个标签
class ProductCard extends HTMLElement {
  // ...组件逻辑
}

// 注册到浏览器——以后就能在 HTML 里用了
customElements.define('product-card', ProductCard);

注册完成后，你在 HTML 里这样用：

<!-- 这是合法的 HTML——浏览器认识它 -->
<product-card name="耳机" price="299"></product-card>

⚡ 关键理解：customElements.define() 不是在"安装"一个库，而是在通知浏览器——"嘿，当遇到 <product-card> 这个标签时，请执行这段构造函数"。这是和 React 的 React.createElement 完全不同的思路——后者需要引入整个 React runtime。

2. Shadow DOM（影子 DOM）

解决了前端开发中最头疼的问题——样式冲突。

想象你在页面里引入了一个第三方日期选择器，结果它的 .input 和你的 .input 冲突了，样式乱掉——这是所有前端开发者的噩梦。

Shadow DOM 就是浏览器的自带隔离机制：

class ProductCard extends HTMLElement {
  constructor() {
    super();
    // 创建一个"影子树"——这里的样式和 DOM 对外部完全隔离
    this.attachShadow({ mode: 'open' });
  }
}

就像 <video> 标签的播放控件——你从来看不到它的内部 DOM 结构，也影响不了它的样式。Shadow DOM 就是给自定义组件赋予了同样的能力。

这意味着你写的组件样式天然不会污染全局，也不怕被全局样式污染——不需要 CSS Module、Styled Components、scoped、BEM 这些"补丁方案"。

3. HTML Templates（HTML 模板）

提供一个惰性的 HTML 片段，解析了但不渲染，等到需要时再克隆使用：

<!-- 定义模板（不会渲染，只是"存着"） -->
<template id="card-template">
  <style>/* 组件的样式 */</style>
  <div class="card">
    <slot name="title"></slot>
    <slot name="content"></slot>
  </div>
</template>

<script>
  // 需要时再克隆出来
  const template = document.getElementById('card-template');
  const clone = template.content.cloneNode(true);
  document.body.appendChild(clone);
</script>

三大 API 的关系

这三个 API 可以单独使用，但组合起来才是完整的 Web Components。Custom Elements 定义行为，Shadow DOM 提供隔离，Templates 优化性能。

与 React/Vue 的思维差异

维度	React/Vue	Web Components
核心	声明式框架——你用 JSX/模板描述 UI，框架运行时将它转换为真实 DOM	浏览器原生标准——你直接操作真实的 DOM 元素，不需要额外的运行时
渲染机制	虚拟 DOM —— 内存中的 DOM 副本 + Diff 算法	真实 DOM —— 直接操作浏览器 DOM API
样式方案	CSS Module、Styled Components、scoped（都需要工具链支持）	Shadow DOM —— 浏览器的原生隔离，零开销
依赖体积	React 约 120KB + ReactDOM 约 130KB + 你的代码	零 KB —— 这是浏览器内置能力
学习成本	需要学 JSX、hooks、编译工具链、路由、状态管理	需要学 3 个 Web 标准 API（Custom Elements + Shadow DOM + Templates）

一个非常形象的类比：学习 React 就像学开车——你需要考驾照、熟悉仪表盘、适应各种辅助系统。而 Web Components 就像你本来就会的自行车——只是现在给你的自行车加了个电动马达。因为你本来就懂 HTML、CSS、JavaScript，Web Components 80% 的知识你已经会了。

Web Components ≠ 不用工具

虽然 Web Components 是原生标准，但你可以（不是必须）用工具提升开发体验：

选哪个取决于项目规模，但核心不变：无论用不用工具，最终产出的都是标准的 Web Components，在任何框架中都能直接使用。

二、先写一个 Demo

与其空谈，不如动手。我们用原生 Web Components 写一个产品卡片组件，包含图片、标题、价格、收藏按钮。

第 1 步：定义组件

// product-card.js
class ProductCard extends HTMLElement {
  // 声明需要监听的属性
  static get observedAttributes() {
    return ['name', 'price', 'image', 'currency'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (oldVal !== newVal) this.render();
  }

  render() {
    const name = this.getAttribute('name') || '商品名称';
    const price = this.getAttribute('price') || '0';
    const currency = this.getAttribute('currency') || '¥';
    const image = this.getAttribute() || ;

    .. = ;
  }
}
customElements.(, );

第 2 步：在页面中使用

<!DOCTYPE html>
<html>
<head>
  <title>Web Components Demo</title>
  <script src="product-card.js"></script>
</head>
<body>
  <h2>商品推荐</h2>
  <product-card name="真无线降噪耳机" price="899" currency="¥" image="https://picsum.photos/seed/1/400/300"></product-card>
  <product-card name="智能手表 Pro" price="1999" currency="¥" image="https://picsum.photos/seed/2/400/300"></product-card>
</body>
</html>

关键体验：你不需要安装 npm 包，不需要配置 webpack/vite，不需要学 JSX——写好一个 .js 文件，在 HTML 里直接引用就能用。

第 3 步：添加交互——收藏按钮

class ProductCard extends HTMLElement {
  static get observedAttributes() {
    return ['name', 'price', 'image', 'currency', 'liked'];
  }
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this._toggleLike = this._toggleLike.bind(this);
  }
  connectedCallback() {
    this.render();
    this.shadowRoot.querySelector('.like-btn')?.addEventListener('click', this._toggleLike);
  }
  disconnectedCallback() {
    this.shadowRoot.querySelector('.like-btn')?.removeEventListener('click', this._toggleLike);
  }
  _toggleLike() {
    const isLiked = .() === ;
    .(, isLiked ?  : );
    .( (, { : { : !isLiked }, :  }));
  }
  () {
     (oldVal !== newVal) .();
  }
  () {
     liked = .() === ;
    .. = ;
    ..()?.(, .);
  }
}

看到区别了吗？没有 useState、没有 useEffect、没有虚拟 DOM。就是最朴素的属性驱动 + DOM API。而 Shadow DOM 自动做了样式隔离——你不用担心 .info 或 .price 的样式被全局 CSS 污染。

三、生命周期对照

阶段	Web Components	React	Vue
创建	`constructor()`	`constructor()`	`created()`
挂载	`connectedCallback()`	`useEffect([], [])`	`mounted()`
更新	`attributeChangedCallback()`	`useEffect()`	`watch`/`computed`
销毁	`disconnectedCallback()`	`useEffect(() => fn, [])`	`unmounted()`
属性监听	`observedAttributes` 静态 getter	`props` 声明	`props` 声明

四、用 Lit 让开发效率翻倍

如果觉得原生太啰嗦，可以用 Google 的 Lit 库——只有 4KB，但提供了声明式模板和响应式更新：

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

class ProductCard extends LitElement {
  static properties = {
    name:    { type: String },
    price:   { type: String },
    image:   { type: String },
    liked:   { type: Boolean, reflect: true },
  };
  static styles = css`
    :host { /* 同样样式隔离 */ }
    .card { border-radius: 12px; overflow: hidden; }
  `;
  render() {
    return html`
      <div class="card">
        <img src="${this.image}" alt="${this.name}" />
        <h3>${.name};
  }
  () { . = !.; }
}
customElements.(, );

Lit 版本的可读性和开发体验已经非常接近 React/Vue，但打包只有 4KB。而且它生成的依然是标准 Web Components，可以在任何框架中使用。

五、真实项目对比

案例 1：某电商商品详情页重构

重构前（React）：首屏加载 3.2 秒，JS 体积 1.1MB
重构后（Web Components）：首屏加载 0.8 秒，JS 体积 120KB

转化率提升约 10%。对于百万日活的平台，这就是千万级别的营收提升。

案例 2：企业内部组件库

某公司维护 React + Vue 两套组件库，版本升级经常出现不同步。统一为 Lit + Web Components 后：

一套组件，React 和 Vue 项目都能用
维护工作量 减少 60%
升级再也不需要"两边改"

六、生态成熟度（2026 年 6 月）

工具/库	定位	适合场景
Lit (Google)	4KB 轻量封装，声明式模板	复杂组件库，替代 React/Vue
Shoelace	完整设计系统，60+ 组件	企业应用 UI 套件
OpenWC	开发工具链（测试/Lint/构建）	大型项目基建
Stencil (Ionic)	编译时生成，优化性能	跨框架组件分发
FAST (Microsoft)	Fluent UI 设计系统	微软生态项目

七、选型决策逻辑

不要一刀切。正确的决策依赖具体场景。

优先选 Web Components

场景	原因
官网/营销页	首屏速度是 KPI，不需要框架
设计系统/组件库	一套组件覆盖所有框架
电商内容页	包体积每小 100KB，转化率就涨 1-2%
长期维护项目	不受框架 breaking changes 绑架
小团队/个人项目	不搭复杂脚手架，一个 HTML 就能跑

仍然用框架

场景	原因
复杂 SPA（Figma/Google Docs 类）	重度状态管理需求
已有大团队	人员流动、技术积累
框架生态依赖	React Native、Next.js SSR、VueUse
SSR/SSG 强需求	Next.js/Nuxt 这些元框架仍有优势

Web Components 赢：官网/营销页、设计系统/组件库、电商内容页、长期维护项目、微前端子应用、跨框架团队

框架赢：复杂 SPA 应用、现有大团队项目、SSR/SSG 强需求、重度状态管理、移动端跨平台、框架特有生态

八、Web Components 在 React/Vue 中怎么用？

⚡ 最关键的卖点：Web Components 写一次，直接在任何框架中使用。但实际集成时有几个"坑"需要注意——特别是在 React 中。

在 React 中使用

React 从 19 版本开始对 Web Components 的兼容性有了显著提升，但仍有几个细节需要知道。

基础用法——直接拿来用

function ProductPage() {
  return (
    <div>
      <product-card name="真无线耳机" price="899" image="https://picsum.photos/seed/1/400/300" />
    </div>
  );
}

React 不认识的 HTML 标签会被当作自定义元素渲染到 DOM 中——Web Components 恰好就是自定义元素，所以基础使用完全没问题。

属性 vs 特性——第一个"坑"

// ❌ 错误方式：React 会把 liked 转成字符串属性
<product-card liked={true} />
// 在 DOM 中变成：<product-card liked="true" /> — 字符串，不是布尔！

原因：React 的 JSX 只设置 HTML attribute（字符串），不会设置 DOM property（真正的 JavaScript 值）。

解决方案：使用 ref 来直接设置 property：

import { useRef, useEffect } from 'react';

function ProductPage() {
  const cardRef = useRef(null);
  useEffect(() => {
    if (cardRef.current) {
      cardRef.current.liked = true;   // 布尔值 ✅
      cardRef.current.price = 899;    // 数字 ✅
    }
  }, []);
  return <product-card ref={cardRef} name="真无线耳机" image="https://picsum.photos/seed/1/400/300" />;
}

监听自定义事件——第二个"坑"

// ❌ React 无法直接监听 Web Components 的自定义事件
<product-card onlike-change={handleChange} />

原因：React 的合成事件系统只处理标准的 DOM 事件。Web Components 通过 dispatchEvent(new CustomEvent(...)) 触发的是自定义事件。

解决方案：通过 ref 手动绑定原生 addEventListener：

function ProductPage() {
  const cardRef = useRef(null);
  useEffect(() => {
    const card = cardRef.current;
    if (!card) return;
    const handleLike = (e) => console.log('收藏状态变化:', e.detail.liked);
    card.addEventListener('like-change', handleLike);
    return () => card.removeEventListener('like-change', handleLike);
  }, []);
  return <product-card ref={cardRef} />;
}

封装成通用 hook，一劳永逸：

function useWebComponent(ref, properties, events) {
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    Object.entries(properties || {}).forEach(([key, value]) => { el[key] = value; });
    const handlers = [];
    Object.entries(events || {}).forEach(([eventName, handler]) => {
      el.addEventListener(eventName, handler);
      handlers.push([eventName, handler]);
    });
    return () => handlers.forEach(([name, fn]) => el.removeEventListener(name, fn));
  }, [properties, events]);
}

在 Vue 中使用

Vue 对 Web Components 的支持比 React 好得多——几乎所有场景都能直接使用：

<template>
  <product-card :name="product.name" :price="product.price" :liked="true" @like-change="handleLike" />
</template>
<script setup>
const handleLike = (e) => console.log('Like changed:', e.detail.liked);
</script>

跨框架体验对比

框架	基础渲染	属性传递	自定义事件	综合体验
Vue 3	✅ 原生支持	✅ `:` 绑定自动处理	✅ `@` 原生支持自定义事件	⭐ 开箱即用
React 19	✅ 基础渲染	⚠️ attribute 转字符串，需 ref	⚠️ 需手动 addEventListener	🔧 需封装 hook
Svelte	✅ 原生支持	✅ 直接绑定	✅ 直接绑定	⭐ 开箱即用
Angular	✅ 原生支持	✅ 直接绑定	✅ 直接绑定	⭐ 开箱即用

最终总结——Web Components 的价值"铁三角"

这就是为什么越来越多的设计系统（Shoelace、Fluent UI、Adobe Spectrum）转向 Web Components 的根本原因——一套组件库，不再需要维护 React 版 + Vue 版 + Angular 版。

写在最后

五年前我们不得不使用框架，因为浏览器 API 太弱。现在浏览器终于足够强大了。

2026 年，当你准备新建一个项目时，先问自己两个问题：

我真的需要那 300KB 吗？
如果不需要，为什么还要引入框架？

如果决定试试

把 product-card.js 保存到你的项目里，新建一个 HTML 文件引用它。或者直接在你现有的 React 项目里用：

function App() {
  return (
    <div>
      <product-card name="商品" price="99" image="/img.jpg" />
    </div>
  );
}

React 不认识的 HTML 标签会被当作普通 DOM 元素渲染——而 Web Components 恰好就是 DOM 元素。兼容性不是问题，它是标准。