原生自定义元素是唯一无需构建工具即可在纯html中实现模块复用的方案，但需避开connectedcallback时机、attributechangedcallback手动同步及shadow dom样式穿透三大坑；customelements.define()必须在dom解析前执行，否则已写的标签不会自动升级；属性变更需显式声明observedattributes；shadow dom样式隔离要求显式继承或使用css自定义属性；组件间通信与懒加载需额外设计。
原生自定义元素（Custom Elements）是当前唯一能在纯 HTML 环境中实现真正模块复用且无需构建工具的方案——但直接用它，90% 的人会掉进 connectedCallback 时机、attributeChangedCallback 手动同步、以及 Shadow DOM 样式穿透这三类坑里。
customElements.define() 必须在 DOM 加载前执行
如果把 customElements.define('my-card', MyCard) 放在 <script></script> 标签末尾、或放在 window.addEventListener('DOMContentLoaded', ...) 里，而 HTML 中已提前写了 <my-card></my-card>，浏览器会把它当“未知元素”渲染，后续再注册也**不会自动升级**。必须确保注册发生在元素被解析之前。
- 推荐写法：把组件定义脚本放在
中，并加defer属性；或用type="module"——两者都能保证执行顺序早于 HTML 解析 - 验证方式：在控制台输入
customElements.get('my-card')，返回构造函数才说明注册成功 - 常见错误现象：
<my-card></my-card>渲染成空白，检查元素面板发现它仍是HTMLUnknownElement
属性变更必须显式声明 observedAttributes
attributeChangedCallback 不会监听所有属性，只响应你在静态 getter observedAttributes 中列出的那些。漏写就等于“改了属性，组件毫无反应”。
- 例如组件支持
title和size属性，必须这样写：static get observedAttributes() { return ['title', 'size']; } - 注意：只有字符串属性会被触发；布尔属性如
disabled要靠hasAttribute()判断，不能依赖值变化 - 若属性是 JSON 字符串（如
data='{"id":1}'），需手动JSON.parse()，且要加 try/catch 防止解析失败中断回调
Shadow DOM 内部样式无法被外部 CSS 选中
这是优点也是陷阱——你写的 .my-card .header 在 Shadow DOM 外无效，但反过来，外部全局样式（比如 button { margin: 0 }）也进不去 Shadow DOM。很多开发者误以为 “加了 Shadow 就万事大吉”，结果发现按钮间距不对、字体没继承。
- 解决继承问题：在 Shadow 样式中显式设置
font: inherit、color: inherit等 - 允许外部定制：用 CSS 自定义属性（
--card-bg）暴露接口，组件内用background: var(--card-bg, #fff) - 调试技巧：Chrome 开发者工具中勾选 “Show user agent shadow DOM”，才能看到 Shadow 内部的真实结构和样式计算
真正难的不是写一个能跑的 MyButton，而是让多个自定义元素之间能通信、能响应路由变化、能按需加载而不阻塞首屏——这些需要额外设计事件总线或配合 IntersectionObserver 做懒加载，不是 customElements.define() 一行代码能覆盖的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
