为什么 Web Components 才是设计系统的正确方向

设计系统已经成了团队开发的核心。统一的样式、组件和交互规则，能让产品保持一致性。这听起来很理想，但很多人走错了方向——他们把设计系统直接绑在某个框架上。

这就像做了一个通用充电器，结果却把它焊死在某款手机上。

框架绑定的问题

设计系统本该是通用的，能在不同项目里复用。但现实中，大部分人都用 React、Vue 或 Angular 去实现。结果呢？

如果你团队用 React，那设计系统就能用；换成其他框架就得重做一遍。
这不是真正的设计系统，只是某个框架的组件库罢了。

问题出在：Web 标准其实已经能解决这件事了。Web Components 就是答案。

Web Components 有什么优势

Web Components 不是什么新潮技术，但它真正实用。

不依赖框架
不管你用 React、Vue 还是 Svelte，Web Components 都能直接用。它不是某个框架的专属组件，而是浏览器原生的。

基于 Web 标准
用 Web Components 写组件，就是在用 HTML、CSS 和 JavaScript。没有框架的抽象层，未来五年也不会过时。

真正的可复用
一个按钮就应该只是按钮，而不是“React 按钮”或“Vue 按钮”。Web Components 能让组件在任何地方都保持一致。

组件要够“笨”

很多组件太复杂了，里面塞满了状态管理、业务逻辑和框架特性。这让它们难以复用。

Web Components 鼓励你写最简单的版本：

• 一个按钮只管显示和点击
• 一个弹窗只管打开和关闭
• 一个下拉菜单只管展开和收起

越简单，越容易在不同项目里用。

一个实际的例子

下面是一个简单的按钮组件：

class VibedButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          --button-padding: var(--vibe-spacing-md, 12px);
          --button-bg: var(--vibe-primary, #0066ff);
        }
        
        button {
          padding: var(--button-padding);
          background: var(--button-bg);
          border: none;
          cursor: pointer;
        }
      </style>
      <button><slot></slot></button>
    `;
  }
}

customElements.define('vibe-button', VibedButton);

这个组件用标准 DOM 方式写，没有框架依赖。它可以在 Next.js、Astro 或纯 JavaScript 项目里直接使用。

怎么让设计系统真正落地

把组件和文档放在同一个仓库里，开发者就能直接看到组件的用法、支持的 CSS 变量，以及主题配置方式。这让设计系统既是参考实现，也是一份活的文档。

你的选择

如果你现在还在用框架绑定的设计系统，可以考虑：

• 新项目直接用 Web Components：从一开始就享受可移植性。
• 老系统慢慢迁移：新组件用 Web Components 写，旧组件可以先封装过渡。
• 面向未来：Web Components 是浏览器标准，已经被很多企业采用（比如 Shoelace、Spectrum）。

真正的好处

真正的好处不是技术上的，而是组织上的：

• 不同框架的团队可以用同一套组件
• 换框架时不用大改代码
• 设计系统能跨项目复用
• 文档和代码始终保持同步

今天就开始试试

想上手很简单：

1. 选一个简单组件（按钮、输入框或卡片）
2. 用 HTML、CSS 和原生 JavaScript 实现
3. 用 CSS 变量控制主题和样式
4. 把文档写在代码旁边
5. 发布给全团队使用

不需要复杂构建工具，也不用纠结框架。只需要写好组件，用好 Web 标准。

设计系统本来就该是通用的。Web Components 能帮你实现这个目标。