HTML全局属性是驱动行为、可访问性和状态同步的底层开关；用错会导致JS失效、CSS不生效、屏幕阅读器跳过及首屏与客户端状态不一致。
HTML全局属性不是“装饰性语法糖”，而是现代网页重构中真正驱动行为、可访问性和状态同步的底层开关——用错一个，JS选不到、CSS不生效、屏幕阅读器跳过、首屏与客户端状态不一致。
class 和 id 的动态操作必须考虑框架生命周期
在 React/Vue 等框架中直接改 el.className 或 el.id，大概率被下一次 diff 覆盖；而用 element.classList.toggle() 或 dataset 操作，又不会触发框架响应式更新。
- 服务端渲染（SSR）后，
id重复会导致getElementById只返回第一个，后续逻辑全崩——务必确保 SSR 输出的id带唯一前缀或哈希 -
class多次拼接导致重复值（如"active active"），classList.contains("active")仍为true，但className.split(" ").includes("active")会误判 - 框架内应优先用状态驱动 class：React 用
className={isActive ? "active" : ""}，Vue 用:class="{ active: isActive }"，而非手动 DOM 操作
data-* 属性不能替代状态管理，但能安全传递初始化参数
dataset 是只读快照，只取 HTML 初始值，且所有值都是字符串——data-count="42" 读出来是 "42"，不是数字；data-active="true" 是字符串 "true"，不是布尔值。
- SSR 页面中用
data-config='{"theme":"dark"}'传配置？必须加try/catch包裹JSON.parse()，否则解析失败直接中断 JS 初始化 - React/Vue 组件 mount 后调用
el.setAttribute("data-id", "500")，组件不会重渲染——这不是 bug，是设计使然 - 真要监听变更，得自己写
MutationObserver监听attributes，或用自定义元素 +attributeChangedCallback，并在observedAttributes中显式声明（不含data-前缀）
hidden 和 contenteditable 是少数能触发原生 DOM 行为的全局属性
hidden 和 contenteditable 是极少数修改后浏览器会立即重绘、更新可访问性树、并影响焦点流的全局属性。它们天然适配渐进增强场景。
立即学习“前端免费学习笔记（深入）”；
-
hidden是布尔属性：写hidden="false"或hidden=""效果一样——只要存在就隐藏；删掉属性才显示。旧版 Safari/IE 需 fallback 到style.display = "none" -
contenteditable元素内容变化不发input事件，必须手动监听input或blur才能同步到状态；且光标位置、撤销栈等行为不受控，不适合做富文本编辑器核心 - 别指望
title或lang触发任何 UI 变化——它们只影响提示和辅助技术，移动端 Safari 完全忽略title，lang错写成lang="en-us"（应为en-US）会导致屏幕阅读器发音错误
tabindex 和 aria-* 不是“锦上添花”，而是重构时无障碍合规的硬门槛
重构页面若去掉原生表单控件、改用 div + click 模拟按钮，tabindex="0" 和 role="button" 就不是可选项，而是法律级要求。
-
tabindex值为负数（如-1）仅禁用 Tab 进入，但可通过 JS.focus()主动聚焦；正整数会强行插入 Tab 顺序，容易打乱自然流，优先用0 -
aria-expanded、aria-hidden等必须与真实 DOM 状态严格同步：折叠菜单时不仅要hidden内容，还要设aria-hidden="true"，否则屏幕阅读器仍会朗读 - 用
data-存状态再靠 JS 同步到aria-？不行——aria-属性变更会立即通知辅助技术，但 JS 同步有延迟，必须用setAttribute直接改
真正关键的不是“哪些属性能用”，而是“哪些变更浏览器会立刻响应”。重构时盯着 DevTools 的 Accessibility 面板和 DOM Attributes 变更日志，比看文档更快定位问题。
