inert属性必须作为布尔属性直接写在容器标签上且不带值，如<main inert></main>；JS动态控制只能用element.inert=true/false赋值，setAttribute等方法无效。
inert 属性怎么写才真正生效
直接在目标容器上写 inert 布尔属性，不带值、不加引号、不赋字符串——写了就禁用，删了就恢复。浏览器只认“存在与否”，inert="true" 或 inert="" 都是无效写法，DOM 属性存在但行为零响应。
-
<main inert></main>✅ 正确：立即切断交互与可访问性树 -
<div inert="false">❌ 错误：字符串值会被当成真值，反而启用 inert -
<button inert>点不了</button>✅ 可用于单个控件，但更推荐包裹容器统一控制
它不影响布局、滚动、颜色或尺寸，页面外观完全不变——只是让浏览器“看不见”这块子树的交互存在性。
JS 动态控制必须用 .inert = true/false
不能用 setAttribute、removeAttribute 或 toggleAttribute 操作 inert——这些调用对行为毫无影响。唯一可靠方式是直接赋值 DOM 元素的 inert 属性：
-
mainContent.inert = true：立刻退出当前焦点（如果有的话），阻止click/keydown冒泡进子树，移出屏幕阅读器可访问性树 -
mainContent.inert = false：恢复全部交互能力，包括重新参与 Tab 顺序（但不会自动聚焦回来） - 别写
el.inert = 'true'或el.setAttribute('inert', '')——前者是字符串赋值，后者完全无效
动态添加后，已聚焦的元素会自动 blur，但不会触发 blur 事件；focus() 调用则静默失败（不报错也不生效），调试时容易漏掉。
立即学习“前端免费学习笔记（深入）”；
为什么不能给 <body> 加 inert
给 <body> 加 inert 会锁死整个页面，包括本该可用的浮层：<dialog>、<toast>、全局 loading 遮罩、键盘快捷键监听器（如 document.addEventListener('keydown', ...)）全失效。
- 正确结构必须是浮层与被禁用区域为兄弟节点：
<div id="app"><main id="main-content" inert></main><dialog open></dialog></div> - 模态框开启时只禁用
<main>或<div id="page-content">，不碰<body> -
<body>上设inert还会阻断document.elementFromPoint()，拖拽场景中可能返回null，导致 drop 区域识别失败
真正容易被忽略的是：inert 不是视觉禁用，也不是事件拦截补丁——它是让浏览器原生“忽略”该 DOM 子树的交互存在性。一旦写错位置或混搭旧方案（比如同时加 aria-hidden 和 pointer-events: none），反而会让键盘用户卡死、读屏器报错、甚至触发 hydration mismatch。
