真正稳定跨元素、影响渲染或交互的全局属性极少：hidden（存在即隐藏，但对script/meta无效）、id/class（驱动CSS匹配与DOM查找）、style（内联样式覆盖）、contenteditable+tabindex="0"（共同构成可编辑可聚焦区）、data-*（JS中需严格按驼峰规则读取，值恒为字符串）。
HTML 全局属性不是“写了就能用”，很多看似通用的属性在特定元素上根本不起作用，甚至被浏览器静默忽略。真正稳定跨元素、可预测、能驱动行为或样式变化的只有极少数几个。
哪些全局属性真能影响渲染或交互行为
浏览器只对部分全局属性做原生响应，其余只是“存着而已”：
-
hidden：存在即触发display: none，但对<script>、<meta>无效，旧版 Safari 需 fallback 到style.display = 'none' -
class和id：直接参与 CSS 匹配和 DOM 查找，document.getElementById("x")是 O(1)，而document.querySelector(".x")依赖选择器引擎，深层嵌套时有延迟 -
style：内联样式会覆盖外部规则，但频繁改el.style.xxx容易引发重排，建议批量操作或用 class 控制 -
contenteditable+tabindex="0"：二者必须同时存在才构成可编辑、可聚焦区域；单独写contenteditable="true"后无法键盘进入 -
tabindex值为-1时仅支持el.focus()编程聚焦，不进自然 tab 流；值为正数（如5）会打乱阅读顺序，WCAG 不推荐
data-* 属性读写时的命名和类型陷阱
data- 看似自由，但 JS 访问规则严格，错一个字符就拿不到值：
- HTML 写
data-user-id="123"，JS 必须用dataset.userId（连字符转驼峰，首字母小写），dataset.userid或dataset.Userid都是undefined - 含数字开头，如
data-1st-place="gold"，不能写dataset.1stPlace（非法变量名），得用dataset["1st-place"] - 值永远是字符串：
data-count="0"→el.dataset.count === "0"，需手动转类型：Number(el.dataset.count) - 属性名只允许 ASCII 字母、数字、
-、_、.；data-user:name会被浏览器静默丢弃 - 空格敏感：
class="btn primary"和class="btn primary"（两个空格）解析出的类数组分别是["btn", "primary"]和["btn", "", "primary"]，后者导致classList.contains("primary")返回false
全局属性在框架中容易被误当响应式源
React/Vue 等框架不会监听 data- 变更，也不会因 title 或 lang 改变自动重渲染：
立即学习“前端免费学习笔记（深入）”；
-
el.setAttribute('data-id', '500')不会触发组件更新，因为dataset只读取初始值 -
data-config='{"theme":"dark"}'不能直接JSON.parse()，需加try/catch，否则解析失败中断初始化 -
contenteditable区域内容变化不发input事件，必须手动监听input或blur才能同步状态 - 若要用
data-驱动状态，自定义元素需显式声明static get observedAttributes() { return ['user-id']; }（注意不含data-前缀），并在attributeChangedCallback中处理
aria-* 和 inert 这类“有条件生效”的属性
它们不是开关式属性，依赖上下文才能起效：
-
aria-label单独加在<div>上可能被屏幕阅读器跳过，必须配合语义角色，如role="button"或role="region" -
inert在 Chrome 122+、Firefox 125+ 才稳定支持，旧版需 polyfill；设了inert的区域，其内部所有焦点、点击、输入事件都会被拦截，但子元素设inert="false"无效——inert不继承也不可覆盖 -
draggable默认值是"auto"，不是true；<p>默认不可拖，得显式写draggable="true"；而<img>和<a>默认就是可拖的 -
exportparts只对含 Shadow DOM 的自定义元素有意义，普通页面基本用不到
最常被忽略的一点：全局属性的“全局”是规范层面的定义，不是运行时保障。写之前先确认目标元素是否支持、是否在当前浏览器版本中生效、是否与其他属性（比如 disabled）冲突——尤其是 tabindex 遇到 disabled 就彻底失效，这点调试时很难一眼发现。
