[data-loading]比.is-loading更适合状态校验，因其属性存在性选择器不依赖值或类名拼写，只要属性存在即生效，容错性强且调试直观。
为什么[data-loading]比.is-loading更适合做状态校验
因为属性存在性选择器只关心属性是否出现，不依赖值内容或类名语义，天然适合作为“开关型”状态的视觉标记。当你在调试时想一眼确认某个加载态是否被正确挂载，[data-loading]只要存在就生效，哪怕值是空字符串、"true"或"pending"都不影响匹配——而.is-loading一旦拼错类名、漏加、或多加空格，整个校验就失效。
实操建议：
- 在JS中统一用
el.setAttribute('data-loading', '')置空值即可触发样式，避免写el.setAttribute('data-loading', 'true')这类冗余赋值 - CSS里直接写
[data-loading] { opacity: 0.6; pointer-events: none; }，无需判断值 - 配合DevTools的“强制状态”功能：右键元素 → “Add attribute” → 输入
data-loading，实时看样式是否响应
document.querySelector('[data-error]')查不到？先确认DOM是否已渲染
属性选择器本身不会等DOM加载完成，它只对当前已存在的节点生效。如果你在DOMContentLoaded之前、或在异步插入节点后立刻执行querySelector，很可能返回null——这不是选择器写错了，是时机不对。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 页面刚打开就运行
document.querySelector('[data-error]')，返回null，但手动刷新控制台再查就有结果 - React/Vue组件内用
useEffect或mounted钩子更新data-error，但JS查询代码放在了外层全局脚本里
解决方法：
- 把查询逻辑包进
DOMContentLoaded或MutationObserver监听中 - 用
await new Promise(r => setTimeout(r, 0))微任务让出执行权，确保DOM更新队列清空 - 不要依赖
document.body.innerHTML是否含某字符串来判断，那和真实DOM树状态不同步
IE11下[data-role]能用，但[data-role^="nav"]会失效
IE11只支持最基础的属性存在性选择器（[attr]）和精确匹配（[attr="val"]），所有带通配符的变体（^=、$=、*=、~=、|=）均不识别。如果你的校验逻辑依赖前缀匹配，比如[data-testid^="header-"]，在IE11里会静默失败，既不报错也不匹配。
兼容处理建议：
- 校验场景优先用
[data-role]或[data-state]这类布尔型属性，避开通配符 - 必须用前缀匹配时，降级为
querySelectorAll('[data-testid]')+.filter(el => el.dataset.testid.startsWith('header-')) - 在构建流程中加入
postcss-attribute-case-insensitive等插件时，注意它不解决IE11对^=的原生缺失问题
用:is([data-invalid], [aria-invalid="true"])合并多状态校验时的坑
:is()本身是现代CSS特性（Chrome 100+/Firefox 100+ 支持），但它在组合属性选择器时容易掩盖特异性问题：比如:is([data-invalid], [aria-invalid="true"]) { border-color: red; }看似简洁，但如果页面里同时有[data-invalid]和[aria-invalid="true"]规则被其他地方定义过，它们的权重可能互相覆盖，导致校验样式不生效。
更稳妥的做法：
- 把校验类集中声明在CSS最底部，利用层叠顺序兜底
- 避免混用
data-和aria-同一语义，比如不要同时设data-invalid和aria-invalid，选一个作为唯一事实源 - 真要合并，用
data-统一收口：[data-invalid], [data-invalid="true"], [data-invalid="error"]，语义清晰且兼容性更好
属性选择器做DOM校验的关键，从来不是语法有多炫，而是你能否一眼看出“这个属性到底有没有被加上”。值可以乱，层级可以变，但只要属性名稳定、设置时机可控、浏览器支持明确，校验就可靠。其他所有花哨写法，都是在这个基础上的优化，不是替代。
