应使用 data- 前缀的自定义属性，因非标准属性（如 uid="123"）违反 html 规范，导致 w3c 验证失败、ssr/hydration 崩溃、无障碍工具失效、cdn/压缩工具移除及测试定位不可靠。
不应该用非标准属性（比如 uid="123"、component-type="card"），因为它们不是 HTML 合法属性，会破坏解析稳定性、干扰 SSR/hydration、让校验工具报错，且无法通过 dataset 安全访问。
非标准属性会让 W3C 验证器直接失败
W3C HTML 验证器把 uid="123" 当作非法属性，报错 Attribute uid not allowed on element div at this point。这不是警告，是硬性校验失败——CI 流程里 html-validate、eslint-plugin-jsx-a11y 或 Next.js 14+ 的 strict mode 会直接中断构建。
- 所有自定义元数据必须以
data-开头，这是 W3C 唯一明确允许的扩展方式 -
data-user-id→ JS 中可用el.dataset.userId读取，自动做驼峰转换 - 禁用
data_、data:、DATA-ID、data-1st-item（数字开头在旧解析器中可能截断）
SSR 和 hydration 会因非标准属性崩溃
服务端渲染出 <div uid="abc">，客户端 React/Vue 按标准 HTML 解析时，发现该属性不存在于规范中，可能忽略、静默丢弃，或与服务端 DOM 树不一致，触发 <code>Hydration failed 错误。
- 浏览器对非法属性的处理无统一行为：Chrome 可能保留，Safari 可能剥离，SSR 框架（如 Astro、Remix）可能直接过滤
- 更隐蔽的问题是：
getAttribute('uid')在某些环境返回null，但开发者误以为它“一直存在” - 真正安全的跨环境读取方式只有
el.dataset.xxx，它只响应合法data-属性
非标准属性干扰无障碍与 SEO 工具链
读屏软件（NVDA、VoiceOver）和搜索引擎爬虫不识别 role 以外的非标准属性；它们依赖语义化标签 + 合规 data- + ARIA 属性做内容推断。写 popup-title="xxx" 不会被任何辅助技术解析，等于白加。
-
alt、aria-label、data-track-id这类合规属性才能被 Lighthouse、axe、Google Search Console 正确采集 - 非标准属性还可能被 CDN 或 HTML 压缩工具（如 html-minifier）自动移除，尤其当配置了
removeUnknownAttributes: true - 测试工具（如 Cypress、Playwright）定位元素时，
[data-testid="save-btn"]稳定可靠；[uid="save"]在不同环境可能根本查不到
框架绑定语法（如 [class]="..."）根本不是 HTML 属性
[class]="revealtel?'':'invisible'" 这类写法不是属性，是 Angular/Vue 编译器注入的指令占位符。DOM 中真实存在的属性名是字面量 [class]，而非标准 class 属性——CSS 选择器、querySelector、getAttribute('class') 全部失效。
- 不要试图用
document.querySelectorAll('[class="revealtel?\'\':\'invisible\'"]')，它永远返回空数组 - 想捕获状态变化，应监听
MutationObserver并提取表达式中的标识符（如revealtel），映射为data-reveal-tel - 真正的运行时状态载体只能是
data-属性或 DOM dataset，其他都是编译期幻影
最常被忽略的点：非标准属性看似“只是多写几个字”，但它让 HTML 从可验证、可预测、可协作的契约，退化成靠人肉记忆和环境侥幸运行的黑盒——一次未引号的 class=header-2026，就可能让 SSR 页面白屏；一个拼错的 data_api_key，会让埋点完全失联。写得快，不如写得准。
