原生 Web Components 尝鲜不引入构建工具写一个可复用的情绪打卡胶囊十月六日的深夜窗外下起了一层薄薄的秋雾路灯在雨水洗过的玻璃上倒映出朦胧的光晕。我合上那些动辄需要 Vite、Webpack 打包才能运行的现代前端脚手架在空文件夹里随手新建了一个极简的 HTML 测试页。在我的手账系统里每一篇日记的开头都需要一个小小的“情绪打卡胶囊Mood Capsule”——展示当天的主要心情平静、治愈、焦虑、欣喜点击时能平滑展开一组备选的小图标切换后自动将数据保存到本地存储中。以前在组件库思维的惯性下为了做一个这样可复用的小组件开发者往往要面临沉重的前置链条安装 React 或 Vue、配置 TypeScript 编译环境、安装 CSS 模块打包器、配置组件导出规则、最后打包出一个几十 KB 的 JS 文件引入网页。只要换了一个没有构建环境的普通 HTML 页面这个组件就立刻变成了无法运行的死代码。其实现代浏览器早已全平台原生支持了Web Components原生组件标准。不需要安装任何 NPM 依赖不需要运行任何构建打包命令直接在原生 JavaScript 里定义一个继承自HTMLElement的类利用 Shadow DOM 封装样式隔离利用 Custom Elements 注册自定义标签我们就能像写原生的video或input标签一样写出一个可以在任何网页中直接通过mood-capsule随插即用的温润手账情绪小胶囊。Web Components 的三大支柱Web Components 并不是一个单一的 API而是由 W3C 推动、现代浏览器底层原生集成的三项标准特性的集合Custom Elements自定义元素允许开发者通过customElements.define(mood-capsule, MoodCapsule)向浏览器底层的标签解析字典中注册全新的语义化 HTML 标签。Shadow DOM影子 DOM为组件提供彻底的样式与 DOM 树物理隔离。在 Shadow DOM 内部写p { color: orange; }无论外部全局样式怎么写绝不会产生任何样式污染Style Leakage外部样式也无法轻易打破组件的封装。HTML Templates模板与插槽利用template和slot实现类似现代框架组件的插槽内容投影。这三项特性全部由浏览器内核C 层面原生实现运行速度极快零运行时Zero Runtime Overhead额外内存开销。手写原生情绪打卡胶囊实战我们来手写这个名为mood-capsule的生活小组件。整个组件的全部逻辑、结构与水彩质感样式全部内聚在一个独立的mood-capsule.js文件中// mood-capsule.js - 原生 Web Component 情绪打卡胶囊 class MoodCapsule extends HTMLElement { constructor() { super(); // 开启 Shadow DOM 隔离 this.attachShadow({ mode: open }); } // 声明需要监听的属性属性变化时自动触发响应式渲染 static get observedAttributes() { return [mood]; } connectedCallback() { this.render(); this.bindEvents(); } attributeChangedCallback(name, oldValue, newValue) { if (name mood oldValue ! newValue) { this.render(); } } get mood() { return this.getAttribute(mood) || 平静; } set mood(val) { this.setAttribute(mood, val); } render() { const moodIcons { 平静: , 治愈: ☕, 欣喜: ✨, 疲惫: ️, 焦虑: }; const currentIcon moodIcons[this.mood] || ; this.shadowRoot.innerHTML style :host { display: inline-block; font-family: -apple-system, BlinkMacSystemFont, PingFang SC, sans-serif; user-select: none; } .capsule-wrapper { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(250, 246, 238, 0.85); /* 暖米宣纸色 */ border: 1px solid rgba(192, 108, 70, 0.25); border-radius: 20px; font-size: 13px; color: #3C322A; cursor: pointer; backdrop-filter: blur(8px); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 8px rgba(60, 50, 42, 0.04); } .capsule-wrapper:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(192, 108, 70, 0.15); border-color: rgba(192, 108, 70, 0.45); } .icon { font-size: 15px; } .label { font-weight: 500; letter-spacing: 0.5px; } /style div classcapsule-wrapper idcapsule-box title点击切换今日心情 span classicon${currentIcon}/span span classlabel${this.mood}/span /div ; } bindEvents() { const box this.shadowRoot.getElementById(capsule-box); const moodList [平静, 治愈, 欣喜, 疲惫, 焦虑]; box.addEventListener(click, () { // 简单循环切换心情 const nextIdx (moodList.indexOf(this.mood) 1) % moodList.length; this.mood moodList[nextIdx]; // 派发标准自定义事件Custom Event通知外层父级页面 this.dispatchEvent(new CustomEvent(mood-change, { detail: { mood: this.mood }, bubbles: true, composed: true // 允许穿透 Shadow DOM 边界向外冒泡 })); }); } } // 向浏览器注册原生标签标签名必须包含连字符kebab-case customElements.define(mood-capsule, MoodCapsule);在任意 HTML 中无痛使用这个组件的引入有多简单你不需要运行npm run dev不需要配置任何打包管线。直接在任何普通的 HTML 静态单页的head里引入该脚本!DOCTYPE html html langzh-CN head meta charsetUTF-8 title秋日手账/title !-- 直接引入原生脚本零打包开销 -- script typemodule src./mood-capsule.js/script /head body stylebackground: #FAF7F2; padding: 40px; h2十月六日雨后初霁的手账/h2 !-- 像使用原生标签一样直接声明 -- mood-capsule mood治愈/mood-capsule script // 原生事件监听无缝捕获心情变动 document.querySelector(mood-capsule).addEventListener(mood-change, (e) { console.log(今日心情已更新为:, e.detail.mood); // 可随手保存至 localStorage localStorage.setItem(today_mood, e.detail.mood); }); /script /body /html在浏览器中双击打开这个 HTML 文件它瞬间完美运行。Shadow DOM 内部所有的圆角、毛玻璃与渐变样式被死死保护在组件内部哪怕外部页面的全局样式把所有的div背景都设成了黑色这个小胶囊依然保持着它温润清透的秋日水彩米宣色。摆脱技术绑架的轻快感现代前端生态在带来工程化便利的同时也无形中建立起了极其厚重的“框架壁垒”。很多刚入行的同学离开 React 或 Vue 就不知道该怎么写一个复用组件。每次想在个人小项目里做一个轻巧的功能都被迫承受几百兆node_modules的沉重锁链。但当你真正回到浏览器原本的原生标准规范中时你会惊叹于现代 Web 底层的强大与优雅。不需要任何转译不需要构建工具。一段干净纯粹的 JavaScript在任何一个标准现代浏览器里就能自由奔跑。这种脱离了重型生态依赖的轻快感就像秋日雨后卸下了沉重湿漉的外套只穿着一件舒适透气的羊毛衫在微凉的晚风里轻盈前行。