data-*属性不是绑定机制，仅提供字符串入口；需手动解析类型、监听变更并同步状态，依赖customElements的observedAttributes和attributeChangedCallback实现响应式更新。
data-* 属性不是绑定，只是字符串入口
写 data-user-id="1024" 不等于把数字 1024 “绑”进组件——它只是在元素上存了个字符串。后续改 el.setAttribute('data-user-id', '1025')，this.dataset.userId 读出来仍是 "1025"，不会自动转成数字、也不会触发任何响应逻辑。
真正起作用的环节必须手动介入：在 connectedCallback 中读取 this.dataset.userId，显式转类型（比如 parseInt(this.dataset.userId, 10)），再同步到组件内部状态；若需监听后续变更，还得配合 static get observedAttributes() 和 attributeChangedCallback。
-
observedAttributes里写['user-id']，不是['data-user-id']—— 去掉data-前缀才是合法属性名 -
dataset.disabled是字符串"true"，不是布尔true；别用if (this.dataset.disabled)判断，应写this.dataset.disabled === 'true' - 构造函数（
constructor）里别操作this.innerHTML或查子节点——此时 DOM 还没挂载，dataset虽可读，但子元素不可靠
observedAttributes + attributeChangedCallback 的正确写法
想让 data-disabled="true" 的变化被监听，必须声明 static get observedAttributes() { return ['disabled']; }，否则 attributeChangedCallback 根本不会触发。首次从 HTML 解析出元素时，该回调也会执行一次，oldValue 为 null。
常见错误是把属性名写错，或在回调里漏掉类型转换：
立即学习“前端免费学习笔记（深入）”；
- 布尔值：用
newValue === 'true'，不用!!newValue（空字符串也是 falsy，但"false"会被转成true） - 数字：用
parseInt(newValue, 10)或parseFloat(newValue)，避免隐式转换出错 - JSON 字符串（如
data-config='{"size":"large"}'）：必须显式JSON.parse(newValue)，且加 try/catch - 变更后要向外通知？别直接改
this.value，用this.dispatchEvent(new CustomEvent('change', { detail: newValue }))
dataset 读写性能差异与使用边界
element.dataset.userId 比 element.getAttribute('data-user-id') 快一个数量级，但只适用于标准命名（全小写+连字符）。一旦属性名含下划线（data-user_id）或大写字母（data-userId），dataset 就完全失效，只能用 getAttribute。
- 服务端渲染（SSR）输出的初始值，优先用
getAttribute—— 它不依赖 DOM 解析阶段，更可靠 -
dataset.foo = "bar"不会更新原始 HTML 属性，只是内存映射；要让 CSS 选择器或getAttribute看到新值，必须调用el.setAttribute('data-foo', 'bar') - 高频读写场景（如虚拟列表滚动中批量更新），先缓存
row.dataset引用，避免重复属性访问开销 - 遍历所有 data 属性？用
for (let key in el.dataset)，不要用Object.keys(el.dataset)（IE 不兼容）
首屏组件定义时机影响真实性能
自定义元素本身不加速首屏，盲目提前 customElements.define() 反而拖慢渲染。关键不是“用不用”，而是“什么时候定义、定义哪些”。
- 首屏用到的组件（如
<hero-banner>）应在<script type="module" defer>中同步定义，且脚本必须放在</body>前 - 非首屏组件（如
<settings-dialog>）绝对不要提前定义，应结合await import('./settings-dialog.js')动态加载后再注册 -
connectedCallback里别做重活：同步 fetch、大量 DOM 渲染、复杂样式计算都会卡住首次升级，影响交互响应 - 有 Shadow DOM 的组件，用
adoptedStyleSheets注入样式，比在模板里塞<style>标签更轻量
data-* 是数据搬运工，不是调度中心；真正决定性能的是你如何组织生命周期、控制渲染节奏、以及是否真的按需加载——这些细节不处理好，再规范的属性名也救不了卡顿。
