inert属性必须直接写为<element inert>，不带值、不加引号；JS动态控制只能用element.inert = true/false，不可用setAttribute；给<body>加inert会连同弹窗一并禁用，应将浮层置于其外层兄弟节点。
inert属性怎么写才生效
直接在目标元素上写 inert，不带值、不加引号、不赋字符串——写了就禁用，删了就恢复。浏览器只看属性是否存在，不认 inert="true" 或 inert="" 这种写法，后者完全无效。
常见错误：<div inert="true">、<button inert=""> —— DOM 属性存在，但行为零响应。
正确写法只有：<main inert>、<div id="sidebar" inert>。它不影响布局、滚动、样式或渲染，只是让浏览器从交互链路和可访问性树中彻底“忽略”该元素及其所有子节点。
JS动态控制inert必须用.inert = true/false
不能用 setAttribute('inert', '')、removeAttribute('inert') 或 toggleAttribute('inert') —— 这些调用对行为毫无影响。唯一可靠方式是直接赋值 DOM 元素的 inert 属性：
立即学习“前端免费学习笔记（深入）”；
-
mainContent.inert = true：立即退出当前焦点（如果有的话），阻止click/keydown事件冒泡进子树，移出屏幕阅读器可访问性树 -
mainContent.inert = false：恢复全部交互能力，包括重新参与 Tab 顺序（但不会自动聚焦回来） - 别写成
el.inert = 'true'或el.inert = 'false'—— 字符串值会被转为布尔true，导致行为异常
为什么不能给加inert
给 <body> 加 inert 会锁死整个页面，包括本该可用的浮层：<dialog>、<toast>、全局 loading 遮罩、键盘快捷键监听器（如 document.addEventListener('keydown', ...)）全失效。
正确结构必须是浮层与被禁用区域为兄弟节点，例如：
<div id="app"> <main id="main-content" inert></main> <dialog open></dialog> <div class="toast"></div> </div>
<main> 是你要冻结的区域，<dialog> 和 <toast> 必须在它外层，不能嵌套其中。否则一并被切断交互与可访问性树。
旧浏览器兜底不是可选项，而是必做项
截至 2026 年 8 月，inert 在 Chrome 111+、Firefox 121+、Safari 18.0+ 原生支持；Safari 17、旧 Edge、部分安卓 WebView 完全不识别该属性，且 polyfill（如 @webcomponents/inert）无法 100% 补齐键盘焦点流重定向和 AT 树移除。
检测方式：if ('inert' in HTMLElement.prototype)；不支持时，至少做三件事：
element.setAttribute('aria-hidden', 'true')element.tabIndex = -1- 递归对所有可聚焦子元素（
button、a[href]、input、[tabindex]）设tabIndex = -1，并监听focusin强制重定向焦点
真正容易被忽略的是：inert 不是视觉禁用，也不是事件拦截，它是让浏览器彻底“看不见”那一块 DOM 子树的交互存在性——兼容性兜底必须覆盖焦点、鼠标、AT 三层，缺一不可。
