真正稳定、跨元素可用的核心全局属性只有 id、class、data-*、title、lang、dir、style、tabindex（需显式设为 tabindex="0"）；其他所谓“全局”属性要么行为受限，要么只在特定上下文中生效。
真正稳定、跨元素可用的核心全局属性只有 id、class、data-*、title、lang、dir、style、tabindex（需显式设为 tabindex="0"）；其他所谓“全局”属性要么行为受限，要么只在特定上下文中生效。
为什么 data-* 不能直接当 React/Vue 状态用
因为 dataset 只读取 HTML 初始值，且所有值都是字符串——data-count="42" 拿到的是 "42"，不是数字；data-active="true" 是字符串 "true"，不是布尔值。框架若直接监听 dataset 做响应式更新，会漏掉后续 DOM 属性变更，也错判类型。
- 常见错误现象：
el.setAttribute('data-id', '500')执行后，React 组件没重渲染 - 把
data-config='{"theme":"dark"}'当 JSON 解析，不加try/catch，JSON.parse()报错中断初始化 - SSR 渲染的 HTML 中
data-值被客户端 JS 覆盖，但框架没监听属性变化，导致首屏与 JS 状态不一致 - 正确做法：仅用
data-*传初始配置或标识符，状态交由框架自身管理；如需动态同步，用自定义元素 +attributeChangedCallback，且必须在static get observedAttributes()中声明（不含data-前缀）
hidden 和 display: none 的关键区别在哪
hidden 是布尔属性，存在即隐藏，删除即显示；它语义明确，且影响可访问性树（屏幕阅读器跳过），但不参与布局（和 display: none 行为一致）。不过，hidden="until-found" 是个例外，它等效于 content-visibility: hidden，元素仍占布局空间。
-
hidden在<script></script>或里会被浏览器静默忽略——不报错也不起作用 - 旧版 Safari/IE 不支持
hidden，需 fallback：el.hidden ? el.style.display = 'none' : el.style.display = '' - 别用
hidden替代逻辑卸载（比如路由切换时），否则会留下无意义的可聚焦元素，破坏键盘导航流 - 如果需要动画过渡，
hidden无法触发 CSS 过渡，得配合opacity+visibility或类名控制
contenteditable 启用后为什么 input 事件不触发
contenteditable 元素内容变化不会自动触发 input 事件，这是规范行为。它本质是让浏览器接管编辑逻辑，而非表单控件，所以不遵循表单事件模型。
- 必须手动监听
input或blur才能同步内容到状态，例如：el.addEventListener('input', () => state.text = el.innerText) - 启用时务必配
tabindex="0"，否则键盘无法聚焦；禁用时要同时移除tabindex或设为-1，避免焦点陷阱 - 非必要场景别滥用：移动端输入法兼容性差，屏幕阅读器支持不稳定，拼写检查、自动更正行为不可控
- 安全启用建议封装函数：
toggleEditable(el, enable)，统一处理contenteditable属性、tabIndex和aria-*辅助属性
id 和 class 在 DOM 查询中的性能差异
id 是浏览器内部哈希索引，document.getElementById("x") 是 O(1) 查找；而 class 依赖 CSS 选择器引擎，document.querySelector(".x") 或 document.getElementsByClassName("x") 都要遍历匹配，尤其在深层嵌套或大量节点时有感知延迟。
- 一个页面中
id值重复，getElementById只返回第一个匹配项，HTML 验证器会警告，但 JS 不报错 -
class支持多值，但空格敏感：class="btn primary"和class="btn primary"（两个空格）会被解析为三个类名：["btn", "", "primary"]，导致classList.contains("primary")返回false - 用
classList操作比直接改className更安全，例如el.classList.add("active")不会覆盖已有类，而el.className += " active"容易引入多余空格或重复 -
data-user-id="123"在 JS 中访问是dataset.userId（连字符变驼峰，首字母小写），不是dataset.userid或dataset.Userid；大小写不匹配就拿不到值
真正通用的全局属性其实不多，多数“全局”属性都有隐含前提：是否在有效上下文、是否被浏览器支持、是否触发可观测的 DOM 变更。开发时优先选 id/class/data-* 这三类最稳定、最可控的属性，其余按需谨慎启用，尤其注意它们对可访问性和 SSR 的影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
