contenteditable加了却无法编辑，根本原因是缺tabindex="0"导致键盘不可聚焦、光标无法进入；它仅认true/false/空字符串三值，“on”等无效；子元素含user-select:none或pointer-events:none会阻断输入；拼写下划线需加spellcheck="false"。
contenteditable 不是加了就能编辑，缺 tabindex="0" 就等于没加——键盘进不去，光标点不着，WCAG 2.1 直接不通过。
为什么 contenteditable 加了却输不了字？
它只认三个合法值：true、false、空字符串（等价于 true），其他如 "on"、"plaintext-only" 全被浏览器静默忽略。
- 光标点不进去、Tab 跳不过去 → 缺
tabindex="0" - 能聚焦但中文/符号无法输入 → 子元素含
user-select: none或pointer-events: none - 拼写下划线干扰 UI → 忘加
spellcheck="false"
正确写法：
<div contenteditable="true" tabindex="0" spellcheck="false">编辑区</div>
data-* 属性读不到值？先看命名和访问方式
HTML 中写 data-user-id="123"，JS 中必须用 dataset.userId 访问——连字符自动转驼峰、首字母小写；大小写错一点就返回 undefined。
-
dataset.userid→ ❌ -
dataset.Userid→ ❌ -
dataset["user-id"]→ ✅（绕过驼峰转换，但失去语法提示） -
data-1st-place→ JS 不能写成dataset.1stPlace（变量名非法），只能用dataset["1st-place"] -
data-user:name→ 冒号被浏览器静默丢弃，值根本存不进去
id 和 class 查找性能差一个数量级
document.getElementById("x") 是 O(1) 哈希查找，快得几乎无感；而 document.querySelector(".x") 或 getElementsByClassName("x") 要走完整 CSS 选择器引擎，尤其在上千节点页面里延迟明显。
- 同一个页面
id重复？getElementById只返回第一个，JS 不报错，但 HTML 验证器会警告 -
class支持多值，但空格敏感：class="btn primary"和class="btn primary"（两个空格）会被解析为三个类名：["btn", "", "primary"]，导致classList.contains("primary")返回false - 改类名优先用
classList.add()/classList.toggle()，别拼字符串：el.className += " active"容易引入多余空格或重复
hidden 不是 CSS 的替代品，行为分两种
hidden（无值或 hidden="hidden"）等价于 display: none，完全移出渲染流；而 hidden="until-found" 是例外：
-
hidden="until-found"→ 视觉隐藏但保留布局位置，等效于content-visibility: hidden，适合懒加载场景 -
hidden在<script></script>或<meta>上无效，浏览器直接忽略，不报错也不渲染 - 它不是动画显隐的工具，别用来做
opacity或transform替代方案
真正容易被忽略的，是 contenteditable 和 tabindex 的绑定关系——没有 tabindex="0"，它就只是个“看起来可编辑”的普通容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
