浏览器仅识别符合html标准的属性，非data-前缀的自定义属性（如uid、is-active）不被dom解析，getattribute返回null且css选择器不匹配；data-*属性需遵循大小写敏感、短横线转驼峰等规则，typescript可约束类型，eslint应拦截新增非标属性。
非标属性为什么会被浏览器忽略
浏览器只按 HTML 标准解析 data- 开头的自定义属性，其他如 uid、roleid、is-active 这类“看着像属性”的写法，实际不会被 DOM API 读取，element.getAttribute('uid') 返回 null，CSS 选择器 [uid="123"] 也完全不匹配。
常见错误现象：用 div uid="abc" 存 ID，结果 JS 里取不到；写 button is-loading 想靠 CSS 控制状态，但 [is-loading] 选择器始终不生效。
- 所有非
data-前缀的自定义属性，都不进 DOM 属性集，也不触发任何标准行为 -
role、aria-系列是例外，但必须严格符合 ARIA 规范，不能自行造词（比如aria-my-state无效） - HTML5 明确规定：只有
data-*是留给开发者安全扩展的命名空间
data-* 属性的正确写法和读取方式
不是只要加了 data- 就万事大吉。大小写敏感、连字符处理、JS 读取方式都有固定规则。
比如 HTML 中写 data-user-id="1001"，JS 里必须用 dataset.userId（驼峰转换），而不是 dataset.userid 或 dataset["user-id"]；CSS 里仍用原样 [data-user-id="1001"]。
- HTML 中用短横线分隔（
data-first-name），JS 中自动转为驼峰（dataset.firstName） - 含数字或特殊字符时，
dataset会丢弃开头数字，data-1id→dataset.id（不是dataset.1id） - 需要保留原始格式或动态键名时，改用
getAttribute('data-xxx')更稳妥
用 TypeScript 约束 data-* 属性类型
纯 HTML + JS 很难保证 data- 属性值类型一致，比如 data-count 有时是字符串 "5"，有时是 "five"，后续逻辑容易出错。
在 TSX/React 项目中，可通过接口约束组件 props，并在模板中显式标注合法 data- 属性：
interface ButtonProps {
'data-testid'?: string;
'data-count': number;
'data-status': 'idle' | 'loading' | 'error';
}
这样 IDE 能提示拼写错误，编译期就能捕获 <button data-count="abc"></button> 这类非法用法。
- 不要依赖运行时字符串校验，TS 接口 + JSX 元素类型检查是最轻量且可靠的防线
- 全局通用属性（如
data-testid）建议统一收口到基础类型定义中，避免各处重复声明 - 服务端渲染时注意：Node.js 环境不支持
dataset，需用getAttribute兼容
已有非标属性的渐进式迁移策略
老项目里满屏 uid、order-no、is-open，不可能一夜全改。关键是要阻断新增，再分批清理。
第一步，在 ESLint 中启用 react/no-unknown-property（React）或自定义 HTML 验证规则（如使用 html-validate），把 uid 这类属性标为错误；第二步，对高频使用的非标属性，统一加一层包装函数做兼容：
// 旧代码还能跑
function getUid(el) {
return el.getAttribute('uid') || el.getAttribute('data-uid');
}
// 新代码只许用 data-uid
- 禁止在 CI 中合并含非标属性的 PR，这是守住底线的最小成本动作
- 迁移时优先处理模板中直接写的属性，JS 动态设置的属性（
el.uid = xxx）更隐蔽，需 grep + AST 扫描辅助发现 - 某些第三方库（如旧版 Bootstrap）会读取非标属性，这类要查文档确认是否支持
data-替代，或加 polyfill
非标属性看似省事，实则把校验、调试、协作成本全推给了后期。真正省时间的做法，是从第一个 data- 开始就写对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
