我接手了一个 10 年前的 jQuery 老项目，用 Web Components 给它续了命-编程阁

前几个月，主管把我拉进一个小黑屋，语重心长地说：那个 2015 年上线的 CRM 系统，客户想加个AI 智能客服的功能，虽然是个老项目，但这是公司的大金矿，你来负责呗！😃。

我打开代码仓库的那一刻，两眼一黑。

jQuery 1.8.3，古董级的版本。
没有 Webpack，没有 Vite，只有无尽的<script>标签。
全局变量漫天飞，一个common.js有 8000 行，里面充斥着var和function。
CSS 样式全剧透，随便改个div的 padding，隔壁页面的布局就崩了。

这时候，我的脑子里有两个小人在打架：

全删了！用 Vue3 + Vite 重构！这代码是人写的吗？😖
别冲动！这项目逻辑极其复杂，重构就是火葬场，上线出了 Bug 你负责？

现实是残酷的：业务只给了 3 天时间，重构是不可能的😒。

但在满屏$('#id').show()的代码里写现代化的 AI 对话界面？光是解决 CSS 样式冲突就能让我加班到猝死。

最后，我没有选择 React，也没用 iframe（通信太麻烦），而是掏出了浏览器原生的大杀器——Web Components。

结果？我只用了一个 JS 文件，就完美地把现代 UI种进了这坨老代码里，而且没引发任何副作用。

今天就来聊聊，这套屎山续命指南。

为什么我选择了 Web Components？

在老项目里加新功能，最大的痛点是什么？

不是 JS 逻辑混乱，是 CSS 污染。

老项目里通常会有这种霸道的全局样式：

/* style.css */ div { box-sizing: content-box; } input { border: 1px solid red; } /* 不知道哪位前辈留下的坑 */ .btn { float: left; }

如果你直接引入一个 Vue/React 组件，这些全局样式会瞬间摧毁你的 UI。

而Web Components 的 Shadow DOM（影子 DOM），就是为此而生的。

它创造了一个完全隔离的 DOM 作用域。

外部的 CSS 进不来（你的组件不会乱）。
内部的 CSS 出不去（你不会搞崩老页面）。

在 jQuery 页面里开始植入AI 助手

假设我们不需要任何构建工具（Webpack/Vite），直接在老页面的 HTML 里写。

定义组件

不用引入任何库，直接用原生 ES6 Class。

// ai-assistant.js class AiAssistant extends HTMLElement { constructor() { super(); // 1. 开启 Shadow DOM，这是隔离的关键 this.shadow = this.attachShadow({ mode: 'open' }); } connectedCallback() { // 2. 渲染 UI 和 独立的 CSS this.render(); // 3. 绑定事件 this.shadow.querySelector('#send-btn').addEventListener('click', () => { this.handleSend(); }); } render() { this.shadow.innerHTML = ` <style> /* 这里的样式绝对安全，不会影响外部，也不受外部影响 */ :host { position: fixed; bottom: 20px; right: 20px; z-index: 9999; } .container { background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); width: 300px; font-family: 'Segoe UI', sans-serif; /* 我们可以用现代字体 */ } .header { background: #007bff; color: white; padding: 10px; border-radius: 12px 12px 0 0; } .content { height: 200px; padding: 10px; overflow-y: auto; color: #333; } input { width: 70%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } button { background: #007bff; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; } </style> <div class="container"> <div class="header">🤖 AI 助手</div> <div class="content" id="chat-box"> <div>你好，我是你的智能助手，有什么可以帮您？</div> </div> <div style="padding: 10px; border-top: 1px solid #eee;"> <input type="text" id="input-msg" placeholder="输入问题..." /> <button id="send-btn">发送</button> </div> </div> `; } handleSend() { const input = this.shadow.querySelector('#input-msg'); const text = input.value; if (!text) return; // 模拟添加消息 const chatBox = this.shadow.querySelector('#chat-box'); chatBox.innerHTML += `<div style="text-align:right; margin:5px 0; color: #007bff;">${text}</div>`; input.value = ''; // 关键：如何跟外部 jQuery 通信？抛出原生 CustomEvent this.dispatchEvent(new CustomEvent('new-question', { detail: { question: text }, bubbles: true, composed: true // 允许穿透 Shadow DOM 冒泡出去 })); } } // 注册组件 customElements.define('ai-assistant', AiAssistant);

在 jQuery 老页面中使用

只需要引入 JS，然后像写<div>一样写标签。

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="legacy-style.css"> <script src="jquery-1.8.3.min.js"></script> </head> <body> <div class="old-header">...</div> <ai-assistant></ai-assistant> <script src="ai-assistant.js"></script> <script> // jQuery 监听组件抛出的事件 $(document).ready(function() { // 这里的事件监听依然丝滑 $('ai-assistant').on('new-question', function(e) { // 注意：jQuery 的 event 对象封装了一层，原生的 detail 在 originalEvent 里 var question = e.originalEvent.detail.question; console.log("老页面收到了 AI 提问：", question); // 这里可以调用老系统的 API // $.ajax(...) }); }); </script> </body> </html>

为什么说这是屎山的终极解法？

侵入性为零

我在ai-assistant.js里写了input { width: 70% }。

如果是普通的 Vue/React 组件，这行样式可能会把老页面所有的 input 都搞乱。

但因为有Shadow DOM，它只对自己生效。老页面的style.css就算写了div { display: none }，也影响不到我 Shadow Root 里的布局。

技术栈框架无关

Web Components 是浏览器原生标准。

这意味着，无论这坨屎山是基于 jQuery、AngularJS 1.x、PHP 模板还是 JSP，只要它是浏览器，它就能跑这个组件。

未来如果你们终于决定重构，换成了 React 19，这个<ai-assistant>标签依然可以直接复制过去用，不用改一行代码。

渐进式迁移

我们可以不用搞重构。

今天把用户卡片改成 Web Component。

明天把侧边栏改成 Web Component。

这是一种n class="nolink">岛屿架构(Astro 类似)。我们在屎山💩的海洋里，建立一个个小岛。等岛屿连成一片，屎山自然就消失了。

避坑指南（干货）

虽然很香，但也有几个坑要注意：

React 兼容性：如果你的老项目里混用了 React 16/17，它们对 Web Components 的事件绑定支持不太好（React 19 已完美修复）。
字体图标： Shadow DOM 里的字体图标（如 FontAwesome）如果定义在外部 CSS 里，内部读不到。需要在 Shadow DOM 的<style>里@import进来，或者用<link>引入。
构建工具：如果组件逻辑复杂，还是建议用 Lit 或 Stencil 这种轻量库来写，然后打包成一个bundle.js丢给老项目引用，开发体验会好很多（支持 TS、响应式数据）。

面对老旧项目，我们往往有两种极端的态度：要么摆烂（接着堆屎），要么激进点（推倒重来）。

但作为成熟的工程师，我们更需要中间平滑路线。Web Components 恰恰给了我们非常好的解决方案。

下次再遇到老板让你给 10 年前的 JSP 页面加功能，别急着提离职。

试着建一个<my-feature>，你会发现，屎山其实也没那么可怕😁。