直接给目标容器设inert=true即可原生冻结其交互与焦点能力；HTML中须写为<div inert>，JS必须用.inert=true/false赋值，浮层需为兄弟节点而非子元素，旧浏览器需polyfill或三步降级。
HTML 中正确声明 inert
只需在任意容器元素上添加布尔属性 inert（不带值）：<div id="page-content" inert><p>这段内容不可点、不可选、不可聚焦</p></div>
写上即生效，移除即恢复。不要写成 inert="" 或 inert="true"，这些写法语义错误，浏览器会忽略。
JS 动态控制必须用 .inert 赋值
JavaScript 操作 inert 属性有且只有一种可靠方式：
✅ 正确：document.getElementById('page-content').inert = true
✅ 正确：el.inert = false
❌ 无效：el.setAttribute('inert', '')、el.toggleAttribute('inert')、el.inert = 'true' —— 浏览器完全不响应，DOM 属性存在但行为无变化。
禁用时的关键 DOM 结构要求
冻结整块区域不是“加个属性就完事”，结构错一步，浮层就失效：
• 模态框、toast、加载蒙层等浮动元素，必须是被 inert 元素的兄弟节点，不能嵌套在其内部；
• 推荐结构：
<div id="app"><br> <main id="main-content" inert></main><br> <dialog open></dialog><br> <div class="toast"></div><br> </div>
• 绝对不要给
<body> 加 inert，否则全局事件（如 ESC 关闭弹窗）、键盘快捷键、虚拟键盘行为都会中断。
兼容性与降级处理
Chrome 111+、Firefox 121+、Safari 18.0+ 原生支持；旧版需兜底：
• 检测支持：if ('inert' in HTMLElement.prototype)
• 不支持时，至少三步模拟：
– el.setAttribute('aria-hidden', 'true')
– el.tabIndex = -1
– 递归遍历所有可聚焦子元素（button、a[href]、input、[tabindex]），设 tabIndex = -1 并监听 focusin 强制重定向焦点
• 更推荐引入官方 polyfill：<script src="https://unpkg.com/wicg-inert@3.1.2/dist/inert.min.js"></script>，放在 </body> 前，且需手动调用 inert.apply(el) 处理动态插入的新 inert 元素。
