data-*属性仅适用于静态初始化，值恒为字符串，需手动解析类型、防错处理，不可直接当布尔或对象使用，且不支持跨页面、敏感信息、运行时通信等场景。
data-* 属性不是万能参数通道，它只适合静态初始化，且必须手动解析、类型转换、防错处理——直接当对象或布尔值用，90% 会出 bug。
data-* 值永远是字符串，别信 dataset 自动转类型
浏览器把 data-count="42、data-active="true"、data-config='{"api":"/v1"}' 全部当字符串存进 dataset。JS 里拿到的 el.dataset.count 是 "42"，不是数字；el.dataset.active 是 "true"，不是布尔 true；el.dataset.config 是 JSON 字符串，不是对象。
- 数值要转：用
+el.getAttribute('data-count')或Number(el.getAttribute('data-count'))，别用parseInt(dataset.count)（"42px" 会变成 42） - 布尔要判：写
el.getAttribute('data-active') === "true"，而不是if (dataset.active)（字符串"false"也是真值） - 结构化数据必须包
try/catch：JSON.parse(el.getAttribute('data-config') || '{}')，否则解析失败直接中断 JS 执行 - 含数字或下划线的属性名（如
data-2024-id、data-user_name）无法通过dataset访问，必须用getAttribute('data-2024-id')
挂载位置决定读取时机和作用域
放在哪里，决定了你能不能在脚本第一行就读到它，也决定了谁有权访问。
- 全局配置（如 API 地址、环境）优先挂
——document.documentElement.dataset在任何脚本中立即可用，不依赖 DOM 就绪 - 组件级配置（如某个卡片的用户 ID）可挂容器元素：
<div id="user-card" data-user-id="789">，但仅限该组件内使用，避免跨组件耦合<li>千万别挂 <code><script></script>标签里硬编码配置 —— SSR 不可复用，服务端也无法差异化注入 - 微前端子应用初始化时，主应用可通过自定义元素挂载点传参：
<micro-app data-tenant-id="prod-789" src="./subapp.js"></micro-app>，子应用用this.getAttribute('data-tenant-id')读 - 在类上定义
static get observedAttributes() { return ['data-id', 'data-mode']; }—— 注意格式：小写 + 连字符，不能写'data-*'通配 - 必须用
el.setAttribute('data-id', '123')触发变更，el.dataset.id = '123'无效 - 回调函数
attributeChangedCallback(name, oldValue, newValue)中，newValue仍是字符串，仍需手动解析类型 - 跨页面传递：刷新就丢，
data-*不跨 DOM 生命周期 —— 改用 URL 参数（?tenant=abc）或localStorage - 敏感信息（密钥、token）：明文暴露在 HTML 源码里，CSP 也拦不住 —— 应由后端接口动态返回，带鉴权
- 运行时通信（如 iframe 间消息、父子组件状态同步）：它不触发事件、不广播、不订阅 —— 该用
postMessage或MessageChannel - 框架组件 props：Vue/React 默认不透传
data-*—— Vue 需inheritAttrs: false+v-bind="$attrs"；React 需显式展开到真实 DOM 节点
自定义元素里监听 data-* 变更？得手动配三样东西
原生 HTML 元素改 value 会触发更新，但自定义元素对 data-* 的修改默认完全静默。想让它响应变化，必须同时满足：
哪些场景绝对不能用 data-* 传参
它不是存储、不是通信总线、不是状态同步机制。越界使用，必踩坑。
最常被忽略的一点：data-* 是“挂上去就完事”的一次性快照，它不参与 diff、不驱动重绘、不自动同步。真正能触发视图更新的，只有 class 和 hidden 这类原生响应式属性。
