attributechangedcallback 不自动监听 data-* 属性，需在 observedattributes 中显式声明带 data- 前缀的小写连字符名；newvalue 恒为字符串；首次挂载不触发，须在 connectedcallback 补读；constructor 中不可读 dataset。
attributeChangedCallback 怎么监听 data-* 属性变化
它不会自动监听 data-* 属性，必须显式声明。常见错误是写了 data-user-id="123" 却没在类里写 static get observedAttributes() { return ['data-user-id']; }，结果回调从不触发。
实操建议：
- 属性名必须带
data-前缀，且全小写加连字符：'data-theme'✅，'theme'或'dataTheme'❌ -
attributeChangedCallback(attrName, oldValue, newValue)中的newValue永远是字符串，data-count="42"读出来是"42"，需手动转数字 - 首次挂载时，
attributeChangedCallback不会调用，得在connectedCallback里用this.getAttribute('data-theme')补读初始值 - 别在
constructor里读dataset—— 此时 DOM 节点还没解析完，this.attributes可能为空
自定义元素内部状态怎么暴露给父级
Shadow DOM 隔离下，父级不能直接访问 shadowRoot.querySelector('input').checked，强行读取可能返回 null（尤其 SSR 或 hydration 阶段）。
可靠方式只有两种：
- 通过
getter/setter：在类中定义get value() { return this._value; }和set value(v) { this._value = v; this.#input.value = v; }，父页调用el.value = 'new'即可 - 通过属性同步：外部设
el.setAttribute('value', 'new')→ 触发attributeChangedCallback→ 更新内部状态 → 再同步到 UI（注意：只改property，别碰setAttribute('checked', '')） - 避免用
dataset暴露状态 —— 它是只读快照，el.dataset.value = 'x'不会触发任何逻辑，也不更新真实 DOM
多个自定义元素实例如何共享同一份状态
原生自定义元素不共享状态，每个 <my-counter></my-counter> 实例的 this.count 彼此隔离。想让它们响应同一数据源，必须引入外部协调机制。
实操建议：
- 顶层状态管理：在根节点（如
<app-shell></app-shell>）维护一个state对象，子组件通过自定义事件（this.dispatchEvent(new CustomEvent('statechange', { bubbles: true, composed: true }))）向上通知，再由根节点广播变更 - localStorage / sessionStorage：适合用户偏好、表单草稿等需持久化的场景，但注意监听
storage事件并做防抖，避免重复渲染 - 全局对象（如
window.appStore）慎用：调试困难、易污染、无法 tree-shake，仅限原型验证阶段 - 别试图用 Redux/Zustand 直接订阅 —— 它们无法感知 Shadow DOM 内部变化，必须手动桥接：在
connectedCallback中store.subscribe，在disconnectedCallback中unsubscribe
路由切换时如何防止自定义元素状态丢失
SPA 中路由跳转常导致组件被移除又重建，disconnectedCallback 是唯一能捕获“即将消失”的时机，但它不可靠 —— 浏览器可能直接销毁节点而不调用。
关键动作必须双保险：
- 在
disconnectedCallback中调用this.saveToStorage()，把关键字段（如this.value、this.isOpen）存入localStorage - 在
connectedCallback开头，先读localStorage恢复状态，再渲染 UI；不要依赖attributeChangedCallback的初始值，它可能为空 - 避免在
constructor中发请求或初始化复杂状态 —— 此时元素尚未插入 DOM，shadowRoot为null，且无生命周期保障 - 注册必须早于 HTML 解析：所有
customElements.define()必须同步执行，否则未注册的标签永远按HTMLUnknownElement处理，connectedCallback根本不会触发
真正难的不是写个 class MyInput extends HTMLElement，而是让它的状态在 SSR、hydration、路由跳转、多实例协作之间保持一致 —— 这些边界情况，比语法本身更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
