我在外包干了三年，终于用Web Components把代码带进了甲方

我在成都外包干了三年，月薪15k。最痛的领悟是：组件像一次性筷子，换框架就得扔掉重写。同样的日期选择器，我用jQuery、Vue、React各写一遍，业务逻辑重复了不下五遍。直到发现Web Components，一切才改变。

转机：原生组件的力量

主流浏览器已全面支持Custom Elements、Shadow DOM。我用仅5KB的Lit库重写了日期选择器：

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

class DatePicker extends LitElement {
  static styles = css`
    .picker { border: 1px solid #ddd; padding: 12px; }
  `;
  static properties = {
    value: { type: String },
    format: { type: String }
  };
  constructor() {
    super();
    this.format = 'YYYY-MM-DD';
  }
  render() {
    return html`
      <div class="picker">
        <input type="date" .value=${this.value} />
      </div>
    `;
  }
}
customElements.define('date-picker', DatePicker);

无需框架，一个<date-picker>标签即可运行。我随后将表格、弹窗等业务组件全部用Web Components重写，打包后仅十几KB。

实践：真正的跨框架复用

同一组件在Vue中直接引入：

<template>
  <div>
    <user-table :data="users"></user-table>
  </div>
</template>

React中同样无缝：

function App() {
  return <div><user-table data={users}></user-table></div>;
}

甚至在纯HTML里就能跑：

<date-picker value="2026-08-06"></date-picker>
<script type="module" src="./date-picker.js"></script>

这彻底终结了框架锁定，组件成了可沉淀的真实资产。

面试与涨薪：用标准说话

面试甲方时，我现场演示了同一组件在Vue、React、Angular中的表现。面对状态管理质疑，我解释：内部用Lit的reactive properties，跨组件通信用CustomEvent或纯JS状态库，与框架无关。面对样式隔离疑问，我展示了Shadow DOM边界和CSS自定义属性穿透方案。最终我拿到22k offer，涨薪7k。我算了一笔账：统一组件库能大幅降低长期技术栈迁移成本。

避坑指南

Web Components并非银弹，实际落地需注意：

1. SEO：Shadow DOM内容难被抓取，需用<slot>暴露关键内容或服务端渲染。
2. 表单参与：原生<form>无法获取Shadow DOM内元素，需用ElementInternals API或自定义逻辑。
3. 老库兼容：过时的jQuery插件不认识Custom Elements，需手动初始化。
4. 团队阻力：有人不愿改变，我用代码量对比说服——同样功能代码减少40%。

框架会过时，但Web标准不会。利用浏览器原生能力，才能把代码变成为自己积累的护城河。工具上，推荐从Lit或Stencil起步，别重复造轮子。