skip to content
rainbow ゆめこ

探索现代 Web Components

/ 7 min read

想打造一个跨框架、复用性超高的 Web 界面吗？那你一定得了解 Web Components！今天，我们来聊聊现代 Web Components 的魅力，重点介绍两个超棒的组件库：@fluentui/web-components 和 @material/web，让你轻松构建现代化、优雅的界面！💻✨

什么是 Web Components？

Web Components 是一套浏览器原生支持的技术标准（基于 HTML、CSS 和 JavaScript），让你可以创建可复用的自定义组件。它的核心包括：

  • Custom Elements：定义自己的 HTML 标签，比如 <my-button>。
  • Shadow DOM：封装组件的 DOM 和样式，避免外部 CSS 干扰。
  • HTML Templates：定义可重复使用的 HTML 结构。
  • ES Modules：通过模块化方式导入组件。

为什么选 Web Components？

  • 跨框架兼容：React、Vue、Angular，甚至纯 HTML 都能用！
  • 可复用性：一次开发，到处使用，减少重复代码。
  • 封装性：样式和逻辑隔离，告别 CSS 冲突的烦恼。
  • 原生支持：现代浏览器（如 Chrome、Edge、Firefox）都支持，零依赖！

现代 Web Components 库推荐

市面上有不少基于 Web Components 的库，今天我们重点聊两个明星选手：@fluentui/web-components（微软的 Fluent UI）和 @material/web（Google 的 Material Design）。它们各有特色，适合不同场景，下面一起来看看！😍

@fluentui/web-components：微软的优雅与性能

@fluentui/web-components 是微软基于 FAST 框架开发的 Web Components 库，融入了 Fluent UI 设计系统，带来现代化、简洁、性能优越的组件体验。

核心特点

  • Fluent UI 设计语言：灵感来自 Windows 11 的流畅、圆润风格，强调简约和无障碍支持（Accessibility）。
  • 高性能：基于 FAST 框架，组件轻量（压缩后约 10kb），支持按需加载，渲染速度超快。
  • 高度可定制：通过 CSS 自定义属性和 Design Tokens，你可以轻松调整主题、颜色、间距，打造品牌化 UI。
  • 跨框架友好：完美支持 React、Vue、Angular，甚至纯 HTML 项目。
  • 丰富的组件：包括按钮、输入框、卡片、菜单、数据表格等，覆盖企业级和消费级场景。

使用示例

通过 esm.run 的 CDN，快速引入整个 Fluent UI 组件库：

<script type="module" src="https://esm.run/@fluentui/web-components"></script>
<fluent-button appearance="accent">Click Me!</fluent-button>

想改颜色？简单加点 CSS 自定义属性：

fluent-button {
  --accent-fill-rest: #0078d4;
}

适用场景

  • 企业级应用：如 Dashboard、CRM 系统，Fluent UI 的商务风格和无障碍支持很加分。
  • 跨平台项目：需要适配多种框架或纯 HTML 的场景。
  • 高性能需求：对加载速度和渲染性能敏感的项目。

为什么选它？ 如果你想要一个现代化、微软风的 UI，同时追求高性能和灵活定制，@fluentui/web-components 是你的菜！😎

@material/web：Google 的 Material Design 经典

@material/web 是 Google 官方的 Web Components 库，基于 Material Design 3（MD3）规范，带来统一、现代化的 Google 风格界面。

核心特点

  • Material Design 风格：遵循 Google 的设计语言（Roboto 字体、动态颜色、流畅动画），适合打造 Android 风或 Google 系应用的界面。
  • 开箱即用：提供丰富的预设计组件，如按钮、卡片、对话框、文本框等，快速搭建原型。
  • 模块化加载：支持按需导入（通过 ESM），减少文件体积。
  • 跨框架支持：React、Vue、Angular 都能无缝集成，纯 HTML 也能用。
  • 生态强大：背靠 Google，文档完善，社区支持稳定。

使用示例

通过 esm.run 快速引入整个 Material Web 组件库：

<script type="module" src="https://esm.run/@material/web"></script>
<md-filled-button>Click Me!</md-filled-button>

想改主题？用 CSS 自定义属性：

md-filled-button {
  --md-filled-button-container-color: #6200ee;
}

适用场景

  • 快速原型开发：需要快速上线一个现代化的 Google 风格界面。
  • 移动端优先：Material Design 的动画和布局特别适合移动端应用。
  • 统一风格项目：希望 UI 保持 Google 生态一致性（如 Gmail、Google Drive 风格）。

为什么选它？ 如果你喜欢 Google 的 Material Design 风格，想快速搭出专业、统一的界面，@material/web 绝对省心！💖

@fluentui/web-components vs @material/web：怎么选？

特性@fluentui/web-components@material/web
设计语言Fluent UI（微软风，简约商务）Material Design（Google 风，现代统一）
性能超轻量，基于 FAST 框架，渲染极快稍重，组件封装完整，优化需按需加载
定制性高，通过 Design Tokens 灵活调整中等，需覆盖 CSS 自定义属性
组件数量丰富，偏企业级功能（如数据表格）丰富，偏消费级 UI（按钮、卡片等）
适用场景企业应用、跨框架、高性能项目快速原型、移动端、Google 风格项目
生态微软背书，社区活跃，偏企业Google 背书，社区成熟，偏消费级

宝宝的建议：

  • 如果你的项目需要 高性能、企业级功能 或 品牌化定制，选 @fluentui/web-components，它的灵活性和微软风 UI 超适合复杂应用。
  • 如果你想要 快速上手、Google 风格 或 移动端优先，选 @material/web，开箱即用的组件让你省时省力。

如何快速上手？

  1. 通过 CDN 引入：

    • 两者都支持 esm.run 等 CDN，适合快速原型开发。比如：

      <!-- Fluent UI -->
      <script type="module" src="https://esm.run/@fluentui/web-components"></script>
      <!-- Material Web -->
      <script type="module" src="https://esm.run/@material/web"></script>

  2. 搭配框架：React、Vue 等框架可直接用，参考官方文档集成。

  3. 优化生产环境：用 npm 安装，按需加载，结合 Tree Shaking 减少体积。

  4. 学习资源：