inert 属性是浏览器级 DOM 冻结方案，使元素不可见、不可聚焦、不响应任何交互事件且不参与可访问性树；它比 display: none 或 pointer-events: none 更可靠，因后者无法阻止 JS 调用或键盘导航。
inert 属性是真正能“冻结” DOM 节点的原生方案——它让元素既不可见（当配合 display: none 时）、也不可聚焦、不响应点击/键盘事件、不参与 ARIA 可访问性树，且子元素全部继承该状态。不是靠 pointer-events: none 伪装，也不是靠 disabled 仅限表单控件，而是浏览器级的交互屏蔽。
为什么 inert 比 display: none 或 pointer-events: none 更可靠
常见错误是以为设了 display: none 就“安全”了，但其实：元素仍可能被 JS 主动调用 .focus()、.click()；屏幕阅读器仍可能读取其内容（除非加 aria-hidden="true"）；而 pointer-events: none 只挡鼠标，键盘 Tab 仍能进入、Enter 仍可触发 click 事件。
inert 一次性解决所有问题：
-
inert元素及其所有后代，完全从 tab 键盘导航流中移除 - 所有鼠标/触摸/键盘事件在冒泡到该节点前就被截断（不会触发
click、keydown等） - 自动等效于
aria-hidden="true"+tabindex="-1"+ 所有交互禁用 - 无需手动遍历子元素加
disabled或监听事件阻止
inert 的兼容性与降级策略
Chrome 105+、Firefox 111+、Safari 16.4+ 原生支持。Edge 同 Chrome。但旧版 Safari（
立即学习“前端免费学习笔记（深入）”；
不能只写 element.inert = true 就完事，得兜底：
- 检测支持：
if ('inert' in HTMLElement.prototype) - 不支持时，手动模拟：
element.setAttribute('aria-hidden', 'true'); element.tabIndex = -1;，再递归对所有子元素设pointer-events: none和user-select: none - 推荐直接用官方 polyfill：
@webcomponents/inert（轻量，仅 2KB），它会自动 patchinert属性行为
在拖放（drag & drop）或模态框中用 inert 冻结背景内容
典型场景：弹出一个 dialog，你希望用户无法操作背后页面——过去常靠 document.body.style.pointerEvents = 'none'，但这会卡死整个页面滚动，且影响焦点管理。
正确做法是给非模态区域加 inert：
<body> <main inert>...主内容</main> <dialog open>...弹窗</dialog> </body>
或者 JS 控制：
const main = document.querySelector('main');
const dialog = document.querySelector('dialog');
dialog.addEventListener('open', () => {
main.inert = true;
});
dialog.addEventListener('close', () => {
main.inert = false;
});
注意：不要对 body 设 inert，否则整个页面包括 dialog 都会被冻结——必须精确作用于需屏蔽的容器节点。
动态插入内容时，inert 不会自动继承
这是最容易忽略的一点：inert 是 HTML 属性，不是 CSS 继承属性，也不是 JS 对象属性。新 append 进去的子节点默认不带 inert，即使父节点已设。
例如：
container.inert = true; container.innerHTML = '<button>新按钮</button>'; // ❌ 新按钮仍可点击
解决方案只有两个：
- 插入前手动加
inert：const btn = document.createElement('button'); btn.inert = true; - 监听
DOMNodeInserted（已废弃）或改用MutationObserver自动补全，但开销大，不推荐用于高频更新场景
更稳妥的做法是：把需要冻结的区域封装为独立组件，在渲染逻辑里统一控制 inert 状态，而不是依赖 DOM 树自动传播。
