inert属性通过让容器及其子树从浏览器交互与可访问性系统中“消失”来彻底禁用区域内所有按钮、输入框、链接等元素；它必须直接写为<div inert>，JS须用.inert = true/false控制，不可用setAttribute，且需配合CSS提示视觉状态并兜底旧浏览器。
inert 属性怎么让区域内所有按钮、输入框、链接彻底失活
直接给容器加 inert 就能一次性封住所有子元素的交互能力，包括 button、input、a、details 甚至 contenteditable 元素——它不是禁用单个控件，而是让整个子树从浏览器的交互与可访问性系统中“消失”。
关键点在于：inert 是布尔属性，只看是否存在，不看值。写成 inert="" 或 inert="true" 都无效；正确写法是：<div inert><button>点不动</button></div>。
-
inert不改变视觉样式，按钮看起来仍可点击，必须配合 CSS（如opacity: 0.5; pointer-events: none;）提示用户当前不可操作 - 已聚焦的子元素会自动
blur()，但不会触发blur事件，别依赖它做清理逻辑 -
contenteditable="true"元素会被禁用编辑，但光标可能仍能进入——需额外加user-select: none和pointer-events: none防止误触
JS 动态控制 inert 必须用 .inert = true/false
DOM API 中 inert 是反射属性（reflected IDL attribute），只能通过 JS 属性赋值控制，setAttribute 完全无效。
错误写法：el.setAttribute('inert', '')、el.toggleAttribute('inert')、el.inert = 'true' —— 浏览器解析后视同无物，行为毫无变化。
立即学习“前端免费学习笔记（深入）”；
正确写法：document.getElementById('main').inert = true，设为 true 后立即退出焦点、阻断事件冒泡、移出可访问性树；设为 false 则完全恢复。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- React/Vue 等框架中，SSR 输出的 HTML 必须初始带
inert属性，否则 hydration 时会报 “prop mismatch” - 动态插入的新节点（如 Vue 组件重渲染后挂载）不会自动继承父级
inert状态，需手动设置其.inert值 - 不要在组件挂载后立刻设
.inert = true，否则首屏可能焦点丢失或白屏；应先确保内容可交互，再按需冻结
为什么不能给 <body> 加 inert 来禁用背景
给 <body inert> 看似省事，实则会锁死所有浮动层：弹窗、toast、全局 loading、键盘快捷键监听全部失效——因为它们都是 <body> 的子元素。
正确结构必须把浮层放在 inert 区域外层 DOM：
<div id="app"> <main id="main-content" inert></main> <dialog open></dialog> <div class="toast"></div> </div>
-
<main>是你要冻结的主内容区，inert只作用于它及其子树 -
<dialog>和<div class="toast">必须是<main>的兄弟节点，不能嵌套其中 -
<body>上设inert会阻断document.addEventListener('keydown', ...)，ESC 关闭弹窗逻辑直接报废 - 移动端虚拟键盘收起时，若
inert区域含滚动容器，可能触发焦点错位——需监听virtualkeyboard事件并手动恢复焦点到安全元素
旧浏览器兜底不是可选项，而是必做项
Chrome 111+、Firefox 121+、Safari 18.0+ 才原生支持 inert；Safari 17、旧 Edge、多数安卓 WebView 完全不识别该属性，且 polyfill（如 @webcomponents/inert）无法 100% 补齐键盘焦点流重定向和辅助技术语义移除。
检测方式：if ('inert' in HTMLElement.prototype)，不支持时至少做三件事：
- 对容器设
aria-hidden="true" - 设
tabIndex = -1并递归遍历所有可聚焦子元素（button、a[href]、input、[tabindex]），统一设tabIndex = -1 - 监听
focusin事件，强制将焦点重定向到安全元素（如页面首个可聚焦项）
别指望 pointer-events: none 单独撑场——它挡不住 Tab 进入、Enter 触发 click、或 JS 主动调用 .focus()。
真正容易被忽略的是：inert 不是视觉禁用，也不是事件拦截，它是让浏览器原生“看不见”那一块 DOM 子树的交互存在性；兼容性兜底必须覆盖焦点流、事件响应、辅助技术三端，缺一不可。
