HTML自定义元素仅提供注册机制和生命周期钩子，高性能可维护界面依赖Shadow DOM组织、属性监听与状态同步；注册需继承HTMLElement、含短横线类名、避免重复；attributeChangedCallback仅响应HTML属性变更且需显式声明监听项；Shadow DOM选open便于调试，closed易致封装失控；性能关键在避免回调中修改自身属性、connectedCallback中重操作及忽略双向映射逻辑。
HTML自定义元素不是“开箱即用的UI组件”，它只提供注册机制和生命周期钩子；真正高性能、可维护的界面，取决于你如何组织 Shadow DOM、监听属性、处理状态同步——稍有疏忽，就会掉进重绘频繁、事件丢失、属性不同步的坑里。
customElements.define 的注册陷阱
注册失败不是因为语法写错，而是类定义不合规。浏览器会静默忽略错误，但元素根本不会生效。
-
customElements.define第二个参数必须是显式继承HTMLElement的类，不能是箭头函数、对象字面量或普通函数 - 类名必须含短横线（
x-button✅，xbutton❌），否则抛DOMException: The element name must contain a hyphen - 重复注册同一名字会直接报错，开发时建议加守卫：
if (!customElements.get('x-input')) { customElements.define('x-input', XInput); } - 构造函数里必须调用
super()，否则实例化失败，控制台无提示，元素渲染为空白
attributeChangedCallback 为什么没触发？
这个回调只响应 HTML 属性变更（setAttribute、removeAttribute、初始 HTML 中的属性），对 JS 属性赋值（如 el.checked = true）完全无感。
- 必须在
static get observedAttributes()中显式声明监听项，漏写就收不到任何回调 -
newValue总是字符串，布尔属性如disabled初始值可能是null或"true"，别直接用=== true判断 - 初始渲染时
<x-toggle checked></x-toggle>会触发一次回调，oldValue是null，直接比较oldValue === newValue会误判 - 想支持 JS 属性赋值，得手动补逻辑：监听
checked属性变更后，同步更新内部<input>的checked状态；反过来，也要在内部 input change 时调用this.setAttribute('checked', '')
Shadow DOM 模式选 open 还是 closed？
选错模式会导致调试困难或封装失效，不是性能问题，而是协作成本问题。
立即学习“前端免费学习笔记（深入）”；
-
mode: 'open'允许外部 JS 通过el.shadowRoot访问内部结构，适合调试、测试、工具链集成（如 Puppeteer） -
mode: 'closed'完全隐藏内部 DOM，shadowRoot返回null，但也会让slot内容投影、CSS 自定义属性透传等变得不可控，实际项目中极少需要 - 不要在构造函数里反复调用
attachShadow，它只能调用一次，重复调用会抛错；如果已存在 shadowRoot，先检查再 attach - Shadow DOM 内部样式不会泄漏，但外部 CSS 无法穿透选择内部元素（除非用
::part()或:host），别指望全局样式能一键覆盖
自定义元素性能容易被忽略的三个点
高频交互场景下，看似简单的自定义元素可能成为卡顿源头，问题往往藏在细节里。
- 避免在
connectedCallback里做大量 DOM 操作或计算，尤其不要在里面发起网络请求或解析大 JSON；考虑用requestIdleCallback延迟非关键逻辑 - 不要在
attributeChangedCallback里直接修改自身属性（如监听value变更后又设this.value = newValue），会触发无限循环 - 使用
slot投影内容时，注意slotchange事件不冒泡，且只在 slot 内容首次变化时触发一次；动态增删子节点不会再次触发，需自行监听
最常被跳过的其实是属性与状态的双向映射逻辑——开发者以为写了 observedAttributes 就万事大吉，结果发现 JS 赋值不生效、HTML 属性改了 UI 不更新、用户点击后属性没同步回标签上。这部分没有标准解法，必须手写，而且每种控件的映射规则都不一样。
