inert是浏览器原生交互隔离机制，仅Chrome 111+、Firefox 121+、Safari 18.0+支持；必须写为<div inert>，JS需用element.inert=true/false赋值，不可用setAttribute；它同时禁用鼠标、键盘和辅助技术访问，无polyfill，旧版需手动兜底。
inert 属性不是“加个 class 就能禁用”的开关，它是一套浏览器原生的交互隔离机制——只在 Chrome 111+、Firefox 121+、Safari 18.0+ 中生效，旧版浏览器完全无视，且无法靠 JS 模拟补全。
inert 属性怎么写才真正生效
inert 是布尔属性，有即为 true，无即为 false。写法必须严格：不能带值，也不能用字符串赋值。
-
<div inert>✅ 正确（推荐） -
<div inert="">⚠️ 解析后也生效，但语义不规范，不建议 -
<div inert="true">❌ 浏览器忽略该值，行为不可靠 -
<div inert="false">❌ 同样无效，“false”字符串不等于布尔 false
HTML 解析时会立即切断该元素及其所有子节点的交互链路和可访问性树挂载——包括鼠标点击、键盘聚焦（tabindex 失效）、文本选中、屏幕阅读器读取，甚至页面内搜索（Ctrl+F）也无法匹配其中文字。
JavaScript 动态设置 inert 必须用 element.inert 赋值
DOM 属性 inert 是可读写的，但仅支持直接赋布尔值。用 setAttribute 或 removeAttribute 完全无效。
立即学习“前端免费学习笔记（深入）”；
-
el.inert = true✅ 立即退出焦点（如果当前聚焦其中）、阻止事件冒泡、移出可访问性树 -
el.inert = false✅ 恢复全部交互能力，包括重新参与 tab 顺序 -
el.setAttribute('inert', '')❌ 不触发任何 inert 行为 -
el.removeAttribute('inert')❌ 不恢复交互，DOM 属性被删了，但 inert 状态不受影响
React/Vue 等框架中若服务端渲染（SSR）或 hydration 时没同步 inert 状态，会触发 “prop mismatch” 警告，需确保初始 DOM 和 JS 状态一致。
为什么不用 pointer-events: none + aria-hidden 组合模拟
这种组合看似覆盖鼠标、视觉、读屏，但实际漏掉关键路径，导致键盘导航和辅助技术行为异常：
-
pointer-events: none不影响键盘导航：Tab 仍能聚焦到<input>或<button>，焦点卡住后无法自然离开 -
aria-hidden="true"只隐藏给读屏器，不影响键盘操作，也不阻止鼠标事件冒泡 - 两者叠加后，用户可能用键盘意外触发表单提交、激活隐藏按钮，或被辅助技术报出“可聚焦但不可用”的矛盾状态
inert 是唯一同时切断鼠标、键盘、AT（辅助技术）三端信号的原生方案。它让浏览器真正“忽略”该子树的存在，而非打补丁式遮蔽。
inert 兼容性兜底必须手动做，没有 magic polyfill
在不支持 inert 的浏览器里（比如 Safari 17 或旧 Edge），只能退回到“半禁用”策略，且需逐层处理：
- 遍历所有可聚焦元素（
button、a[href]、input、[tabindex]等），统一设tabindex="-1"并移除 focus 监听 - 对容器加
pointer-events: none防鼠标，再配aria-disabled="true"提供语义提示 - 浮动层（如 toast、loading）必须放在
inert容器外层 DOM，否则一并被锁死
真正容易被忽略的是：inert 不影响渲染样式，但也不会提供任何视觉反馈——你得自己加灰度、透明度或遮罩样式，否则用户根本看不出哪块 UI 已被暂停。
