data-*属性不能当状态用，只适合存静态、轻量、非敏感的视图层元数据；其值恒为字符串，无响应式能力，修改后不触发更新，仅适用于初始化传参或DOM自身瞬态状态映射。
HTML全局属性本身不会“冲突”，但开发者误用、滥用或忽略其语义与生命周期，会导致行为不可控、样式穿透、焦点错乱、状态不同步等问题——冲突根源不在属性，而在使用方式。
data-* 属性不能当状态用，只适合做选择器前缀或初始化标记
data-* 的值全是字符串，且 dataset 只读取初始 HTML 中的值；后续 JS 修改 el.setAttribute('data-id', 42) 不会触发响应式更新，框架也感知不到。它不是响应式数据源，也不是状态容器。
- 别把
data-config='{"theme":"dark"}'直接JSON.parse()，没try/catch会中断初始化 - SSR 渲染后客户端又改
data-值，首屏和 JS 状态就脱节了，但控制台不报错 - 真要让 data-* 参与状态追踪，得配合
customElements.define和attributeChangedCallback，且必须在static get observedAttributes()里声明（不含data-前缀）
autofocus 只在 HTML 初始解析时生效，异步场景必须手动 focus() 并校验四条件
Vue/React 动态挂载、v-if 渲染、fetch 后插入的元素，哪怕带 autofocus，浏览器也完全无视——这不是 bug，是规范限定。
- 手动调
input.focus()前，必须同时满足：input.isConnected、input.offsetParent !== null、input.tabIndex >= 0且未被disabled或inert阻断、document.activeElement !== input - iOS Safari 要求
focus()必须在用户点击/触摸事件的同步上下文中调用，useEffect(() => ref.current?.focus(), [])在 iOS 上基本无效 - 推荐包裹一层
requestAnimationFrame(() => input.focus({ preventScroll: true }))，避开渲染未完成或 transition 未结束的时机
contenteditable="true" 不等于协同编辑能力，必须配 MutationObserver + selectionchange
contenteditable 只是打开本地编辑开关，不产生操作日志、不广播变更、不感知他人修改。多人同时编辑同一区域，DOM 会直接覆盖，光标错乱，格式不一致。
立即学习“前端免费学习笔记（深入）”；
-
contenteditable="on"或contenteditable="1"是无效值，浏览器按inherit处理，可能意外继承父级false - 靠
input事件监听编辑？漏掉加粗、缩进、拖拽图片、中文输入法上屏——根本不可靠 - 必须用
MutationObserver监听characterData和childList，再配合selectionchange事件才能拿到精确变更和光标位置 - 禁用默认粘贴：
onpaste="event.preventDefault()"，再用event.clipboardData.getData('text/plain')提纯文本
id 和 class 是唯一真正影响渲染与可访问性的全局属性，但 id 冲突后果最隐蔽
document.getElementById 永远只返回第一个匹配节点，其余同名 id 全被忽略，且不报错——这导致逻辑静默失效，排查极难。
- Vue/React 列表渲染中写
<div id="item"> 循环 5 次 → <code>getElementById('item')永远只拿到第一个 - SPA 路由切换后旧节点没清理，新内容带已有
id→ 获取结果错位，但控制台无提示 - 绝对不要用
Math.random()拼id，推荐有意义前缀 + 业务标识，如id="account-form-submit"；必须动态生成时用crypto.randomUUID() -
class最稳定，用element.classList.toggle('loading')比直接操作className更安全
真正容易被忽略的是：所有这些属性的行为边界都由浏览器规范硬性定义，而不是框架或工具链能覆盖的。比如 autofocus 的一次性、id 的唯一性强制、contenteditable 的无协同性——它们不是“功能弱”，而是“职责明确”。越试图绕过规范去“增强”它们，越容易掉进静默失败的坑里。
