自定义元素响应 data-* 属性变化需满足三条件：observedAttributes 显式声明小写连字符格式属性名；通过 setAttribute() 修改而非 dataset；属性值恒为字符串，需手动解析。
HTML 自定义组件中无法响应 data-* 属性变化，不是因为你没写对，而是浏览器根本不会自动监听这些属性的变更。 原生 HTML 元素（如 <input>）的 value 或 checked 变更会触发对应事件或 DOM 反射，但自定义元素的任意 data-* 属性修改后，attributeChangedCallback 不会触发——除非你显式在 observedAttributes 中声明它，且该属性是通过 setAttribute() 修改的（而非直接赋值 el.dataset.xxx = ...）。
如何让自定义元素响应 data-* 属性变更
必须满足三个条件才能触发 attributeChangedCallback：
-
observedAttributes静态 getter 中明确返回要监听的属性名数组，例如['data-id', 'data-mode']；注意：不能写'data-*'通配，必须逐个列出 - 属性变更必须通过
el.setAttribute('data-id', '123')或el.removeAttribute('data-mode')等 DOM API 触发；el.dataset.id = '123'不会触发回调 - 属性名需与
observedAttributes中完全一致（区分大小写），且仅支持小写连字符格式（data-user-name可，data_user_name不可）
示例：
class MyWidget extends HTMLElement {
static get observedAttributes() {
return ['data-id', 'data-label']; // ✅ 显式声明
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'data-id') {
this._id = newValue;
this.render();
}
}
}
customElements.define('my-widget', MyWidget);
// 正确触发：
document.querySelector('my-widget').setAttribute('data-id', 'abc');
// ❌ 下面这行不会触发回调：
document.querySelector('my-widget').dataset.id = 'abc';
data-* 属性值解析：字符串是唯一原始类型
所有 data-* 属性值在 DOM 中始终为字符串。即使你在 HTML 中写 <my-widget data-count="42" data-active="true"></my-widget>，JS 中读取到的仍是 '42' 和 'true'，不是数字或布尔值。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
JSON.parse()直接转换，先校验字符串非空且格式合法，否则抛错 - 建议封装安全解析函数，例如：
parseDataAttr(el, 'data-count', Number, 0)，第三个参数为转换函数，第四个为默认值 -
dataset会自动将连字符转为驼峰（data-user-id→el.dataset.userId），但该映射仅用于读取，设置时仍需用setAttribute才能触发观察
为什么不用 props 而坚持用 data-*？
在纯 HTML 环境下（无框架、无构建工具），data-* 是唯一符合规范、可静态声明、且能被 SSR 和搜索引擎识别的参数传递方式。但它有硬限制：
- 不支持嵌套对象或函数，只能传扁平字符串
- 无法响应 JS 对象属性变更（如
widget.config = { theme: 'dark' }），只响应 attribute 变更 - 若需响应式绑定复杂数据，必须配合
MutationObserver监听子节点变动，或主动调用this.update()，而不是指望属性自动同步
真正容易被忽略的是：当你把自定义元素当 React 组件用，试图靠改 dataset 实现“状态驱动 UI”，其实已经绕开了 Web Components 的设计契约——它只保证 attribute → property → render 的单向通道，不提供 reactive binding。
