[data-state] 比 class 更适合标记动态组件状态，因为它是语义明确、临时单次、无样式耦合的原生属性；浏览器原生支持属性选择器，可精准匹配如 [data-state="loading"]，避免 class 复用污染与 CSS 覆盖，且服务端直出即生效，无需 JS 初始化。
为什么 [data-state] 比 class 更适合标记动态组件状态
因为状态是临时、单次、语义明确的，而 class 容易被复用逻辑污染或 CSS 覆盖。比如一个按钮正在加载，data-state="loading" 不会和 btn-primary 冲突，也不依赖全局 class 命名约定。
浏览器原生支持属性选择器，CSS 中写 [data-state="loading"] 就能精准命中，无需 JS 额外加 class 或维护状态 class 映射表。
- 状态值建议只用小写字母 + 连字符（如
data-state="error"），避免空格、引号、特殊符号导致选择器失效 - 不要用
data-state="true"这类布尔式值——它无法区分“加载中”和“失败”，失去语义 - 服务端渲染或静态 HTML 预览时，直接写死
data-state属性即可生效，不依赖 JS 初始化
在预览窗口里用 document.querySelector 读取并响应状态变化
HTML 预览窗口（比如 VS Code Live Server、Vite 预览页）本质仍是标准 DOM 环境，querySelector 完全可用。但注意：不能靠轮询 getAttribute，应监听真实触发源（如按钮点击、fetch 完成）后主动更新属性。
- 更新状态用
el.setAttribute('data-state', 'success')，不是el.dataset.state = 'success'—— 后者在某些旧版 Safari 中不会触发 CSS 重绘 - 读取时优先用
el.getAttribute('data-state')，dataset对连字符命名（如data-api-error）会转成驼峰（apiError），容易误判 - 若需监听变化，用
MutationObserver观察attributes，目标设为{ attributes: true, attributeFilter: ['data-state'] }
[data-state] 在 CSS 中的实际写法与常见失效原因
CSS 属性选择器本身没问题，但预览时样式不生效，90% 是优先级或拼写问题。例如 button[data-state="loading"] { opacity: 0.6; } 写对了，但被 button:hover 或更宽泛的 .btn:disabled 覆盖。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 确保选择器 specificity 足够：比
button高，但不必堆砌div section article button[data-state]—— 加个.component外层容器更可控 - 避免空格错误：
button [data-state]（带空格）匹配的是后代元素，button[data-state]（无空格）才匹配按钮自身 - 值区分大小写：HTML 中
data-state="Loading"和 CSS 中[data-state="loading"]不匹配；统一用小写 - IE11 支持
[attr="val"]，但不支持[attr~="val"]等复杂语法，预览若需兼容就别用
和服务端模板或构建工具配合时的关键细节
预览窗口常对接 Markdown 渲染器、Astro、Svelte 或纯 EJS 模板。此时 data-state 往往由服务端逻辑注入，而非客户端 JS 动态写入。
- 模板中直接插值：EJS 写
<button data-state="">，Astro 写<button data-state={status}>，确保status是字符串而非对象 - 若状态来自 JSON 文件（如 mock API），注意路径解析：预览服务器可能不代理
/api/status.json，得改用相对路径或硬编码模拟值 - Vite/HMR 环境下，修改模板中的
data-state值不会触发组件重载，但 CSS 会热更新——所以改完 CSS 选择器后要手动刷新预览页看效果
真正麻烦的不是写法，而是状态生命周期管理：谁负责清除 data-state="loading"？超时后要不要自动回退到 "idle"？这些逻辑一旦漏掉，预览时看到的就是卡在 loading 的假死界面。
