自定义元素是行为封装的起点而非“新标签”，需将状态更新、DOM同步等逻辑嵌入connectedCallback和attributeChangedCallback以实现交互即时性；必须显式声明observedAttributes，避免事件重复绑定与属性死循环，并区分独立元素与内置扩展的适用场景。
自定义元素不是“新标签”，而是行为封装的起点
HTML 自定义元素本身不自动带来交互即时性，它只提供一个可复用、可声明式使用的容器。真正提升“即时性”的，是把状态更新、DOM 同步、事件响应这些逻辑封进 connectedCallback 和 attributeChangedCallback 里，避免外部 JS 频繁查询或手动操作 DOM。
常见错误现象：写了 customElements.define('counter-btn', CounterBtn)，但点击后数字没变——因为没在 onclick 里调用 this.increment()，或者没把 increment() 方法绑定到实例上。
- 必须在
constructor()中调用super()，否则无法继承 HTMLElement 原生能力 - 属性变更要显式声明
observedAttributes，否则attributeChangedCallback不触发 - 不要在
connectedCallback里重复添加事件监听器（比如多次this.addEventListener('click', ...)），会导致多次执行
用 attributeChangedCallback 实现属性驱动的即时反馈
比起监听外部 JS 修改 .value 或 .innerText，更可靠的方式是让组件对 HTML 属性变化做出反应。例如，<status-badge status="loading"></status-badge> 可以立刻切换样式和 ARIA 状态，无需等 JS 脚本执行。
使用场景：表单验证状态提示、加载中按钮禁用、主题切换开关、语言包切换后的文案刷新。
立即学习“前端免费学习笔记（深入）”；
- 属性名必须全小写，且只能是字符串；若需传布尔值，用
hasAttribute('disabled')判断 -
attributeChangedCallback(attrName, oldValue, newValue)中，oldValue为null表示首次设置，不是空字符串 - 避免在回调里直接修改自身属性（如
this.setAttribute('status', 'error')），会再次触发回调，造成死循环
独立元素 vs 内置扩展：选错类型会让交互“卡半拍”
独立自定义元素（如 <date-picker>）适合从零构建交互控件；内置扩展（如 <input is="smart-input">）更适合增强已有语义，但容易踩兼容性坑。
性能影响：内置扩展依赖浏览器对 is 属性的支持，Safari 直到 16.4 才完全支持，旧版 Edge 完全不支持；独立元素无此限制，但需要自己实现 focus/blur/enter 键逻辑。
- 如果目标是替换
<input type="email">并加实时校验，优先用独立元素，避免is兼容问题 - 若只是给
<p>加个点击展开摘要功能，用内置扩展更轻量，但必须写<p is="expandable-paragraph"> - 所有自定义元素默认不继承 form 关联能力（如
form属性、reportValidity()），需手动代理
别忽略 adoptedCallback：跨 shadow DOM 移动时的交互断层
当自定义元素被 JS 移动到另一个 shadow root 下（比如拖拽进 Web Component 容器），connectedCallback 不会再次触发，但 adoptedCallback 会——这是修复样式丢失、事件重绑、状态同步的关键时机。
容易被忽略的地方：很多组件在 connectedCallback 里初始化了 MutationObserver 或 ResizeObserver，但没在 adoptedCallback 中重新注册，导致移入新容器后不再响应变化。
-
adoptedCallback在元素被 adopt 到新 document 或 shadow root 时触发，仅一次 - 它不替代
connectedCallback，两者可能先后触发，需各自处理对应逻辑 - 若组件内用了
document.querySelector查找全局资源，移到新 shadow root 后查不到，应改用this.getRootNode().querySelector
