使用 Web Awesome 构建框架无关的 UI 组件

现代前端开发迫使我们做出一个令人不适的选择。要么选择框架特定的组件库,如 Material UI(React)或 Vuetify(Vue),接受供应商锁定和迁移困扰——要么从零开始构建自定义组件,牺牲开发速度和一致性。

本文探讨 Web Awesome,这是一个基于原生 Web Components 构建的框架无关 UI 库,消除了这种错误的二元对立。作为 Shoelace 的继任者,它提供了可在任何支持 HTML 的地方使用的生产级组件,并配备了可与框架特定解决方案媲美的强大主题 API。

Web Awesome 的独特之处

核心采用原生 Web Components

Web Awesome 利用浏览器原生的自定义元素、Shadow DOM 和 CSS 自定义属性。与 React 或 Vue 组件不同,这些组件直接在浏览器中工作,无需转译:

<!-- 在任何 HTML 文件中都能工作,无需构建步骤 -->
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/themes/default.css">
<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/components/button/button.js"></script>

<wa-button variant="brand">点击我</wa-button>

这不仅仅是另一个抽象层——它使用的是平台本身。你的 <wa-button> 与 <button> 一样原生,具有完整的封装和浏览器优化。

真正的框架无关性

虽然其他库通过适配器声称框架兼容性,但 Web Awesome 组件是真正的框架无关。它们在 React、Vue、Angular、Svelte 或原生 JavaScript 中的工作方式完全相同:

// React 19+
import '@awesome.me/webawesome/dist/components/input/input.js';

function Form() {
  return <wa-input label="Email" type="email" required />;
}

<!-- Vue 3 -->
<template>
  <wa-input label="Email" type="email" required />
</template>

<script setup>
import '@awesome.me/webawesome/dist/components/input/input.js';
</script>

无需包装器。无需适配器。只是恰好是自定义的 HTML 元素。

从 Shoelace 的演进

Web Awesome 在 Shoelace 的基础上进行了重大改进:

• 完整的 CSS 框架:除了组件之外,Web Awesome 还包括排版、布局和实用工具类
• 增强的主题 API:三层自定义系统(全局属性、组件属性、CSS 部件)
• 更大的组件库:在 Shoelace 基础上扩展,增加了额外的表单控件、布局和模式
• Font Awesome 集成:通过 kit 代码提供可选的高级图标包

从 Shoelace 的迁移路径简单直接——大多数组件共享相似的 API,只需将 sl- 前缀改为 wa-。

无需构建工具的主题定制

三层自定义

Web Awesome 的主题系统在三个层级上运作,全部使用标准 CSS:

/* 1. 全局设计令牌 */
:root {
  --wa-color-primary-500: #0ea5e9;
  --wa-border-radius-medium: 0.5rem;
  --wa-font-size-base: 16px;
}

/* 2. 组件作用域属性 */
wa-button {
  --wa-button-height-medium: 3rem;
  --wa-button-font-weight: 600;
}

/* 3. CSS 部件用于深度自定义 */
wa-button::part(label) {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

这种方法提供了类似 Bootstrap 的主题灵活性,无需预处理器或构建步骤。更改会自然地通过组件树级联。

性能和无障碍优势

默认懒加载

Web Components 实现了组件级别的真正懒加载。使用 Web Awesome 的自动加载器,组件仅在使用时加载:

<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/webawesome.loader.js"></script>

<!-- 组件仅在 <wa-dialog> 出现在 DOM 中时加载 -->
<wa-dialog label="设置">...</wa-dialog>

内置无障碍功能

每个 Web Awesome 组件都包含适当的 ARIA 属性、键盘导航和焦点管理。Shadow DOM 确保这些实现不会被意外覆盖:

<!-- 自动包含 role="button"、tabindex、键盘处理程序 -->
<wa-button disabled>
  屏幕阅读器会正确播报这个按钮
</wa-button>

快速开始

对于大多数项目,CDN 方式只需要两行代码:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/themes/default.css">
<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/webawesome.loader.js"></script>

对于使用 npm 的生产应用:

npm install @awesome.me/webawesome

然后只导入你需要的内容:

import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/card/card.js';
import '@awesome.me/webawesome/dist/components/button/button.js';

为什么基于标准的 UI 很重要

基于 Web 标准构建的框架无关组件提供了独特的长期优势。你的 UI 组件在不同技术栈之间保持可移植性,减少框架变更时的重写成本。团队可以为应用的不同部分选择不同的框架,而不会牺牲 UI 一致性。

最重要的是,你押注的是 Web 平台本身,而不是任何单一公司或社区。Web Components 现在已在所有现代浏览器中得到支持,其规范不太可能破坏向后兼容性。

结论

对于厌倦了每次框架迁移都要重写 UI 的团队来说,Web Awesome 提供了一个可持续的替代方案——可在任何地方工作的组件,仅用 CSS 即可自定义,并基于将超越任何框架趋势的标准构建。通过选择 Web Components 而非框架特定的解决方案,你投资的代码无论明天哪个框架占主导地位都将保持价值。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.