data-* 属性仅为字符串传递入口，不具响应性，需在 connectedcallback 中手动读取、转换并同步到内部状态；observedattributes 应声明去掉 data- 的属性名，attributechangedcallback 中需显式类型转换，并通过 customevent 向外通知变更。
data-* 属性不是绑定，只是字符串传递入口
很多人以为写 data-user-id="1024" 就等于把数字 1024 “绑”进了组件，实际它只是一次性字符串注入。后续改 el.setAttribute('data-user-id', '1025') 不会触发任何响应，this.dataset.userId 读出来永远是字符串 "1025"，不会自动转成数字或布尔值。
真正起作用的环节在自定义元素生命周期里：必须手动读取、转换、同步到内部状态。否则所谓“属性驱动”就是空谈。
-
dataset中的连字符名自动转驼峰（data-show-avatar→dataset.showAvatar），但data-UID不会变成dataset.uid，得写成data-uid - 别在
constructor()里操作this.innerHTML或读子节点——此时 DOM 还没挂载，dataset虽可读，但子元素不可靠 - 初始化映射推荐放在
connectedCallback()；若需监听后续变更，必须配合static get observedAttributes()+attributeChangedCallback()
observedAttributes 只认标准属性名，不认 data- 前缀
想让 data-disabled="true" 的变化被监听，不能写 observedAttributes: ['data-disabled']——这是错的。正确写法是 ['disabled']，然后在 attributeChangedCallback(name, oldValue, newValue) 里判断 name === 'disabled'。
这是因为 observedAttributes 监听的是 HTML 属性名本身，而 data-* 是属性命名规范，不是独立的“data namespace”。浏览器解析时已把 data-disabled 当作一个完整属性名，但自定义元素 API 要求你声明其“本质名”（即去掉 data- 后的部分）。
- 支持监听的属性必须是合法 HTML 属性名（小写字母、连字符），不能含下划线或大写
-
attributeChangedCallback不会为未声明在observedAttributes中的属性调用 - 首次初始化时（比如从 HTML 解析出元素），该回调也会触发，
oldValue为null
属性值类型必须显式转换，别依赖隐式 coercion
dataset.disabled 是字符串 "true"，不是布尔 true；dataset.count 是 "42"，不是数字 42。直接拿去用 if (this.dataset.disabled) { ... } 在 JS 里永远为真——因为非空字符串是 truthy。
转换逻辑要收口，别散落在各处。常见模式：
- 布尔：
newValue === 'true'（严格相等），不用!!newValue或Boolean(newValue) - 数字：
parseInt(newValue, 10)或parseFloat(newValue)，注意NaN处理 - JSON 对象/数组：
try { JSON.parse(newValue) } catch，避免模板里传错格式直接崩 - 枚举值（如
data-size="large"）：用['small', 'medium', 'large'].includes(newValue)校验
对外暴露变更要用 CustomEvent，别改 dataset
用户改了 el.setAttribute('data-value', 'new')，你的组件可以响应；但你不该反过来用 el.setAttribute('data-value', 'updated') 去“同步回去”——这违反单向数据流，且外部脚本无法监听这种变更。
正确做法是在内部状态更新后，派发自定义事件：
this.dispatchEvent(new CustomEvent('valuechange', {
detail: this._internalValue,
bubbles: true,
composed: true
}))
这样父级可用 el.addEventListener('valuechange', handler) 订阅，也兼容框架封装（如 Vue 的 v-model 会自动监听 input 或 change，但自定义事件需显式绑定）。
真正的难点不在读属性，而在决定“什么时候算变更完成”：是 oninput 实时发？还是 onchange 失焦后发？是否加防抖？这些都得按使用场景定，data-* 本身不提供任何时机语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
