contenteditable必须配tabindex="0"才能键盘聚焦，否则不可编辑、违反wcag 2.1 2.1.1；只认true/false/空字符串三值；子元素含user-select:none或pointer-events:none会阻断输入；spellcheck="false"可消除拼写下划线干扰。
加了 contenteditable 却点不进去、输不了字，90% 是因为漏了 tabindex="0"；data-user-id 在 JS 里读不到，大概率是命名或访问方式错了；hidden 设了没反应，可能是用在了 <script></script> 或 <meta> 上——这些不是“无效”，而是规范明确不支持。
contenteditable 必须配 tabindex="0" 才能键盘聚焦
它不是装饰性搭配，而是可访问性硬性要求：contenteditable="true" 单独存在时，元素不可键盘聚焦、Tab 键跳不过去、屏幕阅读器无法识别为编辑区，直接违反 WCAG 2.1 2.1.1。
-
tabindex="-1"：可用el.focus()编程聚焦，但不进自然 tab 流，不适合常规编辑场景 -
tabindex="0"：按 DOM 顺序加入 tab 流，95% 的可编辑容器该用这个 -
tabindex="5"及正数：强制前置顺序，会打乱屏幕阅读器逻辑，MDN 和 WCAG 均不推荐 - 子元素含
user-select: none或pointer-events: none会拦截光标定位，导致“能聚焦但无法输入” - 补上
spellcheck="false"可避免拼写下划线干扰 UI，尤其在非文本类编辑区（如标签输入框）中很必要
data-* 属性命名和读取有严格规则
浏览器对 data-* 不是“宽松接受”，而是按 HTML 标识符语法校验，JS 访问也必须走 dataset 接口，否则拿不到值。
- 命名必须全小写 + 短横线分隔：
data-user-id="123"✅，data-userId="123"❌（驼峰不被标准化识别） - 不能含大写字母、空格、下划线、特殊符号，否则属性会被忽略或解析为空
- JS 中必须用
el.dataset.userId读取（自动转驼峰），不能用el.getAttribute("data-user-id")混用 - 动态设置要用
el.dataset.foo = "bar"，而非el.setAttribute("data-foo", "bar")—— 后者不会同步到dataset对象 -
dataset所有值都是字符串，data-count="42"读出来是"42"，需手动转换类型
hidden 是布尔属性，不是 CSS 替代品
hidden 的行为由规范定义，不是“视觉隐藏”的万能开关，用错位置或期望错误效果就会失效。
- 存在即生效：
hidden、hidden=""、hidden="hidden"效果一致；hidden="false"无效，浏览器只看是否存在 - 仅对渲染元素有效：
<script hidden></script>、<meta hidden>被浏览器直接忽略，不触发任何行为 -
hidden="until-found"是新值（Chrome 122+、Firefox 125+ 支持），等效于content-visibility: hidden，保留布局位置但不渲染内容 - 别用它做显隐动画：它不触发动画重排，也不支持 transition，需要显隐控制请用
style.display或 class 切换 - 与
aria-hidden语义不同：hidden移除元素于可访问性树，aria-hidden="true"仅隐藏于辅助技术，DOM 仍可聚焦
哪些属性真算全局属性？别被“看着通用”骗了
截至 2026 年 4 月，MDN 明确列为全局属性的共 27 个，不是所有“能加在任意标签上”的都算数。混淆会导致兼容性问题或语义丢失。
-
style和on*（如onclick）不属于全局属性：前者是所有元素支持的“标准属性”，后者是 DOM 接口事件处理器 -
xml:lang和xml:base已被弃用，仅因兼容性保留，新项目不应使用 -
inert、popover、virtualkeyboardpolicy属于较新属性，Safari 目前不支持virtualkeyboardpolicy，inert在旧版 Chrome/Firefox 需 polyfill -
is仅在对应自定义元素已通过customElements.define()注册后才生效，否则被忽略 -
translate控制翻译行为，translate="no"可防止品牌名、代码片段被自动翻译，但对 SEO 无影响
最容易被跳过的其实是 contenteditable 和 tabindex 的绑定关系——不是“最好加上”，而是“缺了就不可用”；还有 dataset 的字符串本质，框架里直接当布尔或数字用，十有八九出 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
