data-*属性无生命周期，仅是静态键值对；其响应逻辑需绑定DOM或Custom Element生命周期事件，读取应在DOMContentLoaded后，Custom Element中需用observedAttributes和attributeChangedCallback监听变化。
自定义属性（data-*）本身没有生命周期，它只是 DOM 节点上的静态键值对；真正有生命周期的是你读取、响应或依赖它的那段逻辑 —— 这段逻辑必须绑定在 HTML 页面或 Custom Element 的真实生命周期事件上。
为什么data-*属性不会“自动更新”或“触发回调”
HTML 中的 data-id、data-user-type 这类属性写在标签里，浏览器只做解析和存储，不监听、不代理、不重计算。它不是响应式数据，也不参与 Vue/React 的 reactivity 系统。
- 直接改
element.dataset.userId = '123'只会同步更新data-user-id属性值，但不会触发任何事件 - 用
setAttribute('data-user-id', '456')也一样 —— 没有内置回调机制 - 如果你靠它初始化组件，却在
DOMContentLoaded前就访问dataset，可能拿到空值（尤其 SSR 渲染未完成时）
什么时候读取data-*最安全：绑定到DOMContentLoaded
绝大多数场景下，你应该在 DOMContentLoaded 后读取页面级元素的 data-* 属性 —— 此时 DOM 已就绪，属性可稳定获取，且不被图片/CSS 加载阻塞。
- 适合初始化全局配置：
const config = JSON.parse(document.body.dataset.config || '{}'); - 适合批量挂载组件：
document.querySelectorAll('[data-component="chart"]').forEach(el => new ChartWidget(el)); - 避免在
<script></script>标签内立即执行读取，除非脚本在</body>前且确保 DOM 已解析完 - 注意：
dataset会自动把data-user-id转成userId驼峰形式，但原始属性名大小写仍需严格匹配（data-API-Key→apiKey，不是apikey）
Custom Element 里怎么让data-*参与生命周期响应
如果你封装了 <user-card> 这类自定义元素，并希望它自动响应 data-user-id 变化，不能只靠属性存在 —— 必须显式声明监听 + 实现响应逻辑。
立即学习“前端免费学习笔记（深入）”；
- 在类中定义
static get observedAttributes() { return ['data-user-id']; }（注意：必须写完整属性名'data-user-id'，不是'userId'） - 实现
attributeChangedCallback(attrName, oldValue, newValue)，在里面调用this.loadUser(newValue)之类逻辑 - 首次渲染前，
constructor或connectedCallback中可用this.getAttribute('data-user-id')读初始值 - 别在
constructor里操作 DOM 或发请求 —— 此时元素还没插入文档，shadowRoot可能为null
容易忽略的关键点：服务端渲染（SSR）与 hydration 不一致
当使用 Next.js、Nuxt 或手写 SSR 时，data-* 属性可能在 HTML 字符串中已存在，但客户端 JS 初始化时若没对齐，会导致首屏闪动或逻辑错乱。
- 服务端生成的
data-loaded="true"，客户端 JS 却在connectedCallback里又去 fetch —— 重复请求 - 解决办法：读取
data-*后先检查是否已有对应状态（如this.hasLoaded = this.hasAttribute('data-loaded')），再决定是否发起网络请求 - 更稳妥的做法是把业务数据序列化进
window.__INITIAL_DATA__，而非全靠data-*传，后者更适合轻量元信息（如 ID、类型、开关）
