attributechangedcallback 是唯一能响应 data- 变更的入口，需配合 static observedattributes 声明监听属性；data- 仅适合传简单初始化参数，结构化数据须 json.parse 并 try/catch 处理；状态同步应操作 property 而非 attribute，hidden 和 class 是可靠视图输出通道。
attributeChangedCallback 是唯一能响应 data-* 变更的入口
原生 HTML 元素对 data- 属性变更完全无感，div 或 span 上改了 data-id，JS 不会自动触发任何回调。只有自定义元素配合 static observedAttributes 和 attributeChangedCallback 才能捕获这类变化。
常见错误现象：document.querySelector('my-toggle').dataset.mode = 'dark' 不触发任何逻辑；或者在 SSR 渲染后客户端直接 el.setAttribute('data-mode', 'light')，但组件内部毫无反应。
实操建议：
- 必须在类上声明
static observedAttributes = ['mode', 'disabled']，只列需要监听的属性名（不含data-前缀） -
attributeChangedCallback(attrName, oldValue, newValue)中，oldValue和newValue都是字符串，需手动转换类型：const isEnabled = newValue === 'true' - 避免在该回调里直接操作 DOM 状态（如改
input.checked），应先更新内部状态变量，再统一同步到视图
checked 属性同步必须操作 property，不能碰 attribute
对于内部含 <input type="checkbox"> 的自定义开关组件，外部设置 myToggle.checked = true 时，若你在 attributeChangedCallback 里调用 this.#input.setAttribute('checked', '')，视觉状态大概率不同步——因为浏览器只认 input.checked 这个 property。
关键区别：checked attribute 控制初始值，checked property 控制实时状态。两者长期不一致是常态。
实操建议：
- 所有状态同步逻辑走
this.#input.checked = this.checked，别碰setAttribute - 在
connectedCallback里初始化一次：this.#input.checked = this.hasAttribute('checked')，之后只信任 JS property - 对外暴露的
checkedgetter/setter 必须直接读写this.#input.checked，而非 dataset 或 getAttribute
hidden 和 class 是唯一可信赖的视图输出通道
你不能靠 el.hasAttribute('hidden') 判断组件当前“状态”，因为初始 HTML 带 hidden、JS 后续设 el.hidden = false，但 attribute 没删，读出来还是 true。真正可靠的是 el.hidden 这个 property 的布尔值。
同理，class 支持增删切换且触发 CSS 重绘，比 className 字符串拼接安全得多。
实操建议：
- 状态迁移由 JS 主动控制（如
setState('loading')），再批量设置el.hidden = true/false - 多状态 UI 用 class 控制：
el.classList.toggle('state-error', state === 'error') - 避免混合使用：
el.setAttribute('hidden', '')和el.hidden = true同时存在，极易导致 property 与 attribute 不一致
data-* 只适合初始化传参，结构化数据必须 JSON.parse + try/catch
SSR 渲染的 data-config='{"sort":"date","limit":20}' 被客户端 JS 读成字符串后直接 JSON.parse，一旦格式出错（比如服务端漏转义），整个组件初始化失败。
更隐蔽的坑：data-count="42" 读出来是字符串 "42"，参与 + 1 运算得 "421"，不是数字 43。
实操建议：
- 仅用
data-传简单、不可变参数，如data-theme="dark"、data-locale="zh-CN" - 结构化数据一律用
JSON.parse(el.getAttribute('data-config') || '{}')，且必须包try/catch - 在
connectedCallback里完成初始化转换，存入组件实例属性，后续逻辑只读这个 JS 对象，不再碰 dataset
最易被忽略的一点：自定义元素的构造函数里无法访问 this.attributes 或 this.dataset，因为此时 DOM 尚未挂载。所有初始化读取必须延迟到 connectedCallback 执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
