inert是html原生布尔属性，使元素及其子树完全脱离交互与可访问性树；chrome 105+、edge 105+、opera 91+稳定支持，firefox和safari尚未实现，需js兜底降级。
inert 属性是什么，浏览器支持现状如何
inert 是 HTML 原生属性，作用是让元素及其所有子节点**完全脱离可访问性树和交互流程**：键盘焦点无法进入、鼠标事件被忽略、屏幕阅读器跳过——比 disabled 或 aria-disabled="true" 更彻底。
但注意：inert 目前仅在 Chromium 系（Chrome 105+、Edge 105+、Opera 91+）中稳定支持；Firefox 和 Safari 尚未实现。使用前必须检查运行环境，不能当作全局可用特性。
常见误用场景包括：用它替代 CSS pointer-events: none（后者不阻断键盘焦点）、或期望它在 Safari 中生效却没降级方案。
怎么正确添加和移除 inert 属性
直接通过 DOM API 操作布尔属性即可，无需设值：
document.getElementById('modal').inert = true;
// 或
element.setAttribute('inert', '');
// 移除时用
element.removeAttribute('inert');
// 不要写成 inert="false" —— 这样反而会启用 inert 行为（HTML 布尔属性只看是否存在）
关键点：
-
inert是反射属性（reflected IDL attribute），推荐优先用element.inert = true/false写法，语义清晰且兼容性略好 - 动态添加后，已聚焦的元素会自动 blur，但不会触发
blur事件（这是规范行为，别依赖它做清理逻辑） - 若元素本身有
tabindex，inert会覆盖其效果，无需手动重置 tabindex
inert 和 aria-hidden/pointer-events 的区别在哪
inert 不是 aria-hidden="true" 的替代品：aria-hidden 只影响屏幕阅读器，不阻止鼠标点击或键盘焦点；pointer-events: none 只拦截鼠标，不影响 Tab 键导航。
三者叠加使用反而危险——比如同时设 inert 和 aria-hidden，可能在旧浏览器中造成双重不可访问，又在新浏览器中冗余。
- 只要目标是「彻底禁用交互 + 可访问性隔离」，就只用
inert，不要加其他修饰 - 需要兼容老浏览器时，得用 JS 手动禁用焦点、监听并丢弃事件、配合
aria-hidden和tabindex="-1"模拟 inert 效果 -
inert对focus()调用静默失败（不报错也不生效），这点和disabled不同，调试时容易漏掉
实际项目中哪些地方适合用 inert
最典型的是模态框（modal）背后的页面主体：<main></main> 加 inert，比用一堆 tabindex="-1" 和事件拦截更干净。
但要注意边界情况：
- 如果模态框内含 iframe，
inert不会影响 iframe 内容（跨源限制），需单独控制 - 动态插入的子元素默认继承父级
inert状态，但若父元素 later 移除了inert，新插入节点不会自动“激活”，需确保插入时机合理 - 服务端渲染时，避免在 SSR 阶段就写死
inert，否则首屏可能直接禁用全部交互——应由客户端 JS 根据状态控制
inert，而是判断什么时候该用它、什么时候该退回到手动模拟逻辑。浏览器兼容性墙还在那儿，绕不开。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
