Web Components：原生组件化开发新趋势 —— 一个老广程序员的实战血泪史
大家好，我是阿强，坐标广州西门口，老城区土生土长的老广。去年十月，我终于从一家外包公司跳槽进了甲方——一家做区块链供应链金融的金融科技公司，月薪从15k涨到22k，房租还是3500（感谢爸妈早年在荔湾买的房子）。这事儿听起来挺爽，但只有我自己知道，那三个月差点把我熬成“人干”。
今天不聊跳槽秘籍，也不吹区块链多牛X，就想和大家聊聊最近在项目里踩的一个坑：Web Components。对，就是那个被React/Vue圈子里很多人当“古董”的原生组件技术。结果你猜怎么着？它居然成了我们项目的救命稻草。
起因：甲方爸爸的“混搭”需求
事情得从去年底说起。我们公司要做一个给上下游企业用的区块链数据可视化平台。前端团队原本是纯React栈，UI库用的是Ant Design，后端是Java + Spring Boot（毕竟我是Java出身嘛，看到Spring就亲切）。
一切都很顺利，直到某天产品经理老李（人称“需求永动机”）拉着我和前端组长阿杰开会。
“强哥，有个新需求，”老李推了推眼镜，“客户那边要用我们的组件嵌入他们自己的老系统，而且他们的系统是Angular写的，还有几个页面甚至是jQuery时代的遗物。”
我一听就懵了：“嵌入？跨框架？他们自己不能调API自己画吗？”
老李苦笑：“人家说你们不是搞区块链的吗？高大上一点，能不能做个‘即插即用’的组件？就像微信小程序那样，丢个<blockchain-tx-viewer>进去就能跑。”
阿杰当场翻白眼：“React组件怎么可能直接塞进Angular里？除非……用iframe？”
但iframe性能差、通信麻烦，还容易出安全问题。老板一听要加iframe，直接摇头：“不行，体验太割裂。”
那几天我晚上回家吃饭都没胃口，老婆看我愁眉苦脸，还问我是不是又想跳槽了。我说：“不是跳槽，是快被需求逼疯了。”
转机：深夜刷GitHub时的一道光
上周五晚上，我加班到十点，泡了杯王老吉（老广的续命水），瘫在工位上刷GitHub Trending，想找点灵感。突然看到一个仓库叫 web-components-for-enterprise，点进去一看——原生Web Components实现的可复用UI组件，不依赖任何框架，直接通过HTML标签使用。
我脑子“嗡”一下：这不就是我们要的东西吗？
Web Components 是浏览器原生支持的组件化标准，由三个核心技术组成：
- Custom Elements：自定义HTML标签
- Shadow DOM：封装样式和DOM，避免污染全局
- HTML Templates：声明式模板
最关键的是——它和框架无关！不管是React、Vue、Angular，还是纯HTML，只要浏览器支持（现代浏览器基本都行），就能直接用。
我立马拉阿杰过来：“你看这个，是不是能解决老李的问题？”
阿杰一开始嗤之以鼻：“Web Components？那不是十年前就有的东西吗？现在谁还用？React Hooks不好玩？”
我说：“别管新旧，能解决问题的就是好技术。而且，咱们不是要做‘区块链+’嘛，总不能连个组件都跨不出去吧？”
他沉默了三秒，然后说：“行，你写个demo试试，下周一晨会前给我看。”
实战：从零写一个区块链交易查看器
周末两天，我关掉手机，窝在家里捣鼓。目标很明确：做一个 <blockchain-tx-viewer tx-id="0xabc..."> 组件，传入交易ID，自动拉取链上数据并渲染。
第一步：定义Custom Element
class BlockchainTxViewer extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
static get observedAttributes() {
return ['tx-id'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'tx-id' && newValue) {
this.render(newValue);
}
}
async render(txId) {
const data = await fetchBlockchainData(txId); // 模拟API调用
this.shadowRoot.innerHTML = `
<style>
.container { padding: 16px; border: 1px solid #ddd; }
.tx-id { font-family: monospace; }
</style>
<div class="container">
<p>交易ID: <span class="tx-id">${txId}</span></p>
<p>状态: ${data.status}</p>
<p>时间: ${new Date(data.timestamp).toLocaleString()}</p>
</div>
`;
}
}
customElements.define('blockchain-tx-viewer', BlockchainTxViewer);
第二步：在React中使用
在React组件里，直接当普通HTML标签用：
function App() {
return (
<div>
<h1>我们的React App</h1>
{/* 直接使用Web Component */}
<blockchain-tx-viewer tx-id="0x1234567890abcdef"></blockchain-tx-viewer>
</div>
);
}
第三步：交付给客户
我把打包后的JS文件发给客户，他们只需要在页面里加两行代码：
<script src="blockchain-tx-viewer.js"></script>
<blockchain-tx-viewer tx-id="0xabcdef..."></blockchain-tx-viewer>
搞定！无论他们用什么框架，甚至纯静态页，都能跑。
吐槽与反思：为什么我们之前忽略了它？
说实话，写完demo后我自己都震惊了——这么简单？但转念一想，也难怪我们以前不用。
原因一：生态惯性
React/Vue太香了，状态管理、路由、SSR一条龙，谁还回去写原生JS？我在外包那三年，项目清一色React，连jQuery都懒得碰，更别说Web Components这种“冷门货”。
原因二：开发体验不够友好
没有JSX，没有热更新，调试靠console.log，Shadow DOM还让DevTools看元素变得有点绕。写起来确实不如React舒服。
原因三：误解“过时”
很多人以为Web Components是“被淘汰的技术”，其实不然。Google的Material Web Components、GitHub的<details-dialog>都是基于它。甚至Stencil、Lit这些现代库都在优化它的开发体验。
但这次实战让我明白：技术没有新旧，只有合不合适。
Web Components vs React：不是对立，是互补
有人可能会问：“既然React这么强，干嘛还要Web Components？”
我的答案是：场景不同。
- 如果你在构建一个完整的单页应用（SPA），React/Vue依然是首选，生态、工具链、团队熟悉度都碾压。
- 但如果要做可复用的微前端模块、跨框架组件、或嵌入第三方系统的“小部件”，Web Components就是王者。
就像我们这个区块链项目——核心平台用React，但对外交付的组件用Web Components，两边各司其职，互不干扰。
甚至，你可以在React内部封装Web Components，做成公司的UI资产库，供所有产品线调用。我们已经开始这么干了。
给同行的建议：别把鸡蛋放一个篮子里
作为从外包杀进甲方的老广程序员，我最大的感悟就是：技术视野比框架熟练度更重要。
外包那三年，我只会CRUD + 调API，以为会React就能横着走。结果面试甲方时，被问到“如何实现跨框架组件共享”，当场卡壳。那次失败让我意识到：光会用轮子不行，得懂轮子怎么造。
所以，如果你也在焦虑“React会不会被取代”“要不要学新框架”，我的建议是：
- 先精通一个主流框架（比如React），这是你的饭碗；
- 再了解底层原理（比如DOM、事件、模块化），这是你的护城河；
- 最后尝试跨界技术（比如Web Components、微前端），这是你的差异化优势。
顺便说一句，我现在工资涨了，但压力一点没少。不过至少，我不再怕产品经理说“能不能做个通用组件”了。
结语：老广程序员的务实哲学
在广州，我们老广讲究“识做”——懂得怎么做，更懂得什么时候该用什么方法。煲汤要老火，炒菜要镬气，写代码也一样：该用React时绝不手软，该上Web Components时也别扭捏。
Web Components或许不是下一个“风口”，但它绝对是一个被低估的实用工具。尤其在微前端、低代码平台、B端嵌入式场景中，它的价值正在被重新发现。
所以，别再说它“过时”了。技术圈的潮流像珠江的水，来来回回，但真正能解决问题的，永远有它的位置。
最后，如果你也在广州做开发，欢迎约茶（不是奶茶，是早茶）。我们可以边啃虾饺边聊Web Components怎么优化Shadow DOM性能——当然，账你付，我刚涨薪，得省着点花。
P.S. 我整理了一份超简明的《Web Components实战教程》，包含区块链交易组件完整代码 + React集成示例，放在GitHub上了。搜 guangzhou-web-components-demo 就能找到。觉得有用的话，给个star，让我老婆知道我没白加班 😅
P.P.S. 区块链项目还在招Java后端，要求不高，会Spring Boot + 对新技术有好奇心就行。有意私聊，内推成功请你喝凉茶（包治百病那种）。
评论 0