<p>data-* 属性仅是字符串标记，非响应式props，需手动桥接、类型转换并规避生命周期陷阱；其值全为字符串，不自动同步状态，框架默认不透传，命名和类型限制多，安全读取须用getAttribute，真正驱动视图更新的只有class和hidden。</p>
data-* 属性不能直接作为组件 props 使用，它只是字符串标记，必须手动桥接、类型转换、并规避生命周期陷阱。
data-* 只能初始化传参，不是响应式通道
你在 <my-card data-user-id="123" data-active="true"> 里写的值，进组件后全是字符串：dataset.userId 是 "123"，dataset.active 是 "true"，不是数字或布尔值。改了 JS 里的状态，DOM 不会同步；反过来用 setAttribute('data-active', 'false') 改了属性，组件内部也不会自动更新。
- 常见错误：在 Vue/React 组件里直接写
props['data-user-id']或this.$attrs['data-user-id']—— 框架默认不透传，根本读不到 - Vue 必须显式配置
inheritAttrs: false并在模板中用v-bind="$attrs"才能把 data-* 挂到根元素上 - React 必须解构或展开
...props，且要确保最终渲染的 DOM 元素是真实节点（不能是<Fragment>） - SSR 渲染时，服务端和客户端初始
dataset值不一致，框架 diff 可能误删或重复挂载
dataset 命名和类型全是坑
dataset 看似方便，实际靠连字符转驼峰规则映射，但只处理字母，不认数字和下划线：data-2024-id → dataset.2024Id 语法非法；data-user_name → dataset.user_name 为 undefined。
- 安全写法：一律用
getAttribute('data-2024-id')读含数字、下划线、多连字符的属性 - 数值别用
parseInt(dataset.count)——"42px"会被截成42；稳妥用+el.getAttribute('data-count')或Number() - 布尔判断别写
if (dataset.enabled)——"false"也是真值；应写dataset.enabled === "true" - 结构化数据如
data-config='{"timeout":5000}'，必须包try/catch再JSON.parse()，否则初始化直接崩
真正能驱动视图更新的只有 class 和 hidden
class 和 hidden 是少数几个浏览器原生支持“属性变更 → 视图重绘”的全局属性。它们不存数据，但能可靠输出状态。
立即学习“前端免费学习笔记（深入）”；
-
hidden是布尔属性：存在即隐藏，移除即显示；旧版 Safari 需 fallback 到style.display = 'none' -
class推荐用element.classList.toggle('loading')，比直接拼className安全，且 CSS 能立即响应 - 避免用
title或lang控制显示逻辑——它们只影响辅助技术，不触发重绘 - 如果需要监听 data-* 变更，唯一路径是自定义元素 +
attributeChangedCallback，且observedAttributes必须写['data-user-id']（不是'data-*'），变更必须走setAttribute，不能用dataset.xxx =
微前端和 Shadow DOM 场景必须显式桥接
Shadow DOM 内部无法访问宿主节点的 dataset，微前端子应用也拿不到主应用挂的 data- 配置。它们不是自动继承的。
- Shadow DOM 组件初始化时，必须从宿主节点（比如
<my-card>）读取dataset，再手动传入shadowRoot或设置内部 state - 微前端场景下，主应用可通过
window.__MICRO_CONFIG__注入，或用MutationObserver监听根节点 dataset 变更，再通知子应用 - 别把
data-当持久化手段——刷新就丢；跨页面需搭配localStorage或 URL 参数同步 - 复杂配置优先走构建时注入（如 Vite 的
vite-plugin-html注入window.APP_CONFIG），而非运行时靠 DOM 解析
最常被忽略的一点：data-* 的“传递”本质是开发者手动完成的桥接动作，不是框架或浏览器自动提供的能力。任何想绕过这一步、指望它像 props 一样直通的想法，都会在 SSR、微前端或状态更新时突然失效。
