直接在目标容器上添加布尔属性inert即可生效，如内容不可交互；JS需用.inert = true/false控制，浮层须置于inert区域外，旧浏览器需引入wicg-inert polyfill。
直接给目标区域加 inert 属性就能彻底暂停它的所有交互和焦点能力——它不是视觉隐藏，也不是事件拦截，而是让浏览器原生“忽略”该元素及其全部子树的用户输入与可访问性挂载。
怎么写 HTML 才生效
把 inert 当作布尔属性写在任意容器上，不带值：
<main inert><p>这段内容不可点、不可选、不可聚焦，屏幕阅读器也读不到</p></main>- 写了就启用，删了就恢复；不要写
inert=""或inert="true"，那样无效 - 它不影响布局、颜色、尺寸等任何样式，页面外观完全不变
JS 动态控制必须用 .inert = true/false
不能靠 setAttribute 或 removeAttribute 操作：
立即学习“前端免费学习笔记（深入）”；
- 正确：
document.getElementById('main').inert = true - 错误：
el.setAttribute('inert', '')—— 浏览器完全无视 - 设为
true后，当前聚焦其中的元素会自动失焦，Tab 键跳过整个子树，click/keydown 不再冒泡进来
禁用整块区域时的关键细节
真正容易出错的是 DOM 结构和浮层位置：
- 模态框开启时，应只给主内容区（如
<main></main>或<div id="page-content">）加 <code>inert，而不是给 - 弹窗、加载蒙层、toast 等浮动层必须放在
inert容器的外层 DOM 中，否则一并被锁死 - 服务端渲染或框架 hydration 后，需确保 JS 状态与初始 HTML 的
inert属性一致，否则 React/Vue 会报 “prop mismatch” - 推荐使用官方
wicg-inertpolyfill（支持 IE9+、Safari 10+），但注意它不模拟辅助技术语义 - 加载 polyfill 必须在业务脚本之后、首次使用
inert之前，且不能加async或defer - 动态插入的
[inert]元素，polyfill 不自动处理，需手动调用inert.apply(element)
旧浏览器必须手动兜底
Chrome 111+、Firefox 121+、Safari 18.0+ 原生支持；更早版本需 fallback：
