全局属性需按规范使用才能生效：contenteditable必须配tabindex="0"才可键盘聚焦；data-*仅读初始值且需手动类型转换；hidden和class是唯二稳定触发视图更新的属性。
全局属性不是“写上就生效”的装饰品，它们的行为差异直接决定交互是否可靠、可访问性是否达标、状态同步是否出错。
contenteditable 必须配 tabindex="0" 才能键盘聚焦
只写 contenteditable="true"，元素在键盘操作下完全不可进入——浏览器不会把它加入 tab 流，屏幕阅读器也识别为普通容器。这不是兼容性问题，是规范强制要求。
- 合法值只有
true、false、""（空字符串等价于true）；plaintext-only是无效值，会被忽略 -
tabindex="-1"只允许 JS 主动调用el.focus()，不参与自然 tab 顺序；tabindex="0"是最安全的选择 - 如果父级有
inert或元素本身带disabled，tabindex会彻底失效 - 示例正确写法：
<div contenteditable="true" tabindex="0" spellcheck="false">编辑区</div>
data-* 属性只读初始值，不能当响应式状态源
服务端渲染的 data-count="42" 在客户端 JS 里读出来是字符串 "42"，后续用 setAttribute('data-count', '43') 修改，dataset.count 仍返回 "42"——它不监听变更，也不自动更新类型。
- SSR 和 CSR 初始值不一致时，框架 diff 容易误判，导致首屏闪动或状态错乱
-
data-user-id→ JS 中必须用dataset.userId（连字符转驼峰，首字母小写），dataset.userid拿不到值 - 含数字开头的名如
data-1st-place，只能用dataset["1st-place"]访问，dataset.1stPlace是语法错误 - 结构化数据必须包
try/catch：JSON.parse(el.getAttribute('data-config') || '{}')
hidden 和 class 是仅有的两个能稳定触发视图更新的输出通道
hidden 是布尔属性：存在即隐藏，移除即显示；class 支持增删切换，且能精准控制多状态 UI。其他全局属性（如 title、lang、draggable）都不触发重绘，也不能被框架自动感知。
- 别用
setAttribute('hidden', '')控制显隐——property 和 attribute 容易不同步；应直接操作el.hidden = true/false - 多状态场景（loading/success/error）优先用
classList.toggle('state-loading')，比拼接className更安全 -
title在 iOS Safari 完全不支持 hover，移动端长按提示也不稳定，不能作为主要交互反馈 -
draggable默认是"auto"，不是true；<p draggable></p>实际不可拖，得显式写draggable="true"
自定义元素中想让 data-* 参与状态追踪，必须走 attributeChangedCallback
原生 HTML 元素加 data-，没有任何机制通知 JS “它变了”。唯一可控路径是自定义元素 + 生命周期钩子，但需严格遵循声明规则。
- 必须在
static get observedAttributes()中声明要监听的属性名（不含data-前缀），例如['user-id', 'config'] - 回调函数
attributeChangedCallback(attr, oldVal, newVal)中，newVal仍是字符串，需手动转换类型 - 首次初始化时，该回调不会触发——
observedAttributes只监听后续变更，初始值需在connectedCallback中单独处理 - 非自定义元素（如
<div>）无法启用此机制，强行监听等于没监听<p>真正容易被忽略的是：全局属性的“生效”不等于“可用”。<code>contenteditable开了但没tabindex，就是残缺功能；data-写了但没做类型转换和错误捕获，就是潜在崩溃点；hidden和class看似简单，却是唯一能跨框架、跨运行时稳定驱动 UI 的两个出口。
