HTML自定义元素是浏览器原生唯一真正模块化的方案，需用class extends HTMLElement定义、super()初始化、customElements.define()注册，配合Shadow DOM封装与observedAttributes监听属性变更。
HTML自定义元素（Custom Elements）不是“模块化用法”的可选方案之一，而是目前唯一能在浏览器原生层面实现真正模块化的 HTML 方案——它把结构、样式、行为打包进一个标签，且通过 Shadow DOM 隔离作用域，不依赖构建工具或服务端渲染。
customElements.define() 必须配合 class extends HTMLElement 使用
直接调用 customElements.define('my-card', MyCard) 时，MyCard 必须是一个继承 HTMLElement 的类，且构造函数第一行必须是 super()。漏掉 super() 会报错：Failed to construct 'CustomElement': Please use the 'new' operator。
常见错误包括：
- 写成普通函数或对象字面量，而非类
- 在
constructor中操作this.innerHTML或查询子节点——此时元素尚未挂载到 DOM，this下没有子元素 - 忘记加
mode: 'open'参数导致attachShadow返回null
属性变更必须显式声明 observedAttributes
如果组件支持像 <my-card title="Hello"></my-card> 这样的属性传值，仅靠 getAttribute('title') 不足以响应后续修改（比如 JS 动态改 el.title = 'World'）。必须配合两个钩子：
立即学习“前端免费学习笔记（深入）”；
-
static get observedAttributes()返回字符串数组，如['title', 'src'] -
attributeChangedCallback(attr, oldVal, newVal)里手动更新 UI，不能只监听不处理
没声明 observedAttributes，attributeChangedCallback 根本不会触发；声明了但没实现回调，属性变了 UI 就不动。
生命周期钩子的执行时机很关键
不同钩子适合不同操作，错放会导致 DOM 错误或资源泄漏：
-
constructor：只做轻量初始化（如super()、this.attachShadow），禁止访问this.ownerDocument或调用querySelector -
connectedCallback：元素插入 DOM 后触发，适合渲染模板、绑定事件、发起 fetch —— 这里才是操作 DOM 的安全位置 -
disconnectedCallback：元素移出 DOM 时触发，必须在这里清理定时器、取消 fetch、解绑事件，否则内存泄漏
比如在 constructor 里写 fetch('/api/data').then(...) 是危险的：组件可能被创建但永不挂载，请求就白发了。
命名必须含短横线且不能重复注册
自定义标签名规则硬性强制：
- 必须包含至少一个短横线（
-），如site-header、data-table；mybutton或MyButton都非法 - 不能与现有 HTML 标签重名（如
div、article），也不能重复调用customElements.define注册同一名称，否则抛DOMException: Failed to execute 'define' on 'CustomElementRegistry' - 建议统一前缀（如
app-或项目缩写），避免团队协作时冲突
实际开发中容易忽略的是：动态加载多个 JS 文件时，可能因加载顺序或缓存导致重复 define，应在 define 前加守卫：if (!customElements.get('my-element')) { customElements.define(...) }。
最常被跳过的细节是：Shadow DOM 默认不继承外部样式，连 font-family 和 color 都要手动透传；而 slot 的内容分发逻辑，一旦没写 <slot></slot>，外部传入的内容就完全不可见——这些都不是报错项，而是静默失效，调试起来特别费时间。
