使用HTML inert属性，能否解除dialog的惰性以实现交互？

问题背景 #

开发包含<dialog>元素的Web组件时，使用HTMLDialogElement.showModal()打开对话框会将其移入顶层，但部分内容（如Google ReCaptcha）不兼容顶层特性，会渲染在对话框下方。改用show()能解决渲染问题，但会丢失showModal()的无障碍核心特性——自动将其他所有HTML元素设为inert状态（无法交互且从无障碍树中隐藏）。

尝试通过手动设置inert属性/API模拟showModal()的无障碍效果：用show()打开对话框后，给document.body设inert = true，再给对话框设inert = false。但截至2023年10月31日，在Chrome/Edge浏览器中测试发现，对话框内元素仍无法交互。

测试代码 #

HTML #

<button id="modalOpener">.showModal()</button>
<button id="dialogOpener">.show()</button>

<dialog id="testDialog">
  <p>
    ... Some HTML Top Layer-incompatible content here
  </p>

  <button id="dialogCloser">
    Close Dialog
  </button>
</dialog>

JavaScript #

const dialogOpener = document.getElementById("dialogOpener")
const modalOpener = document.getElementById("modalOpener")
const dialogCloser = document.getElementById("dialogCloser")
const testDialog = document.getElementById("testDialog")

dialogOpener.addEventListener("click", evt => {
  testDialog.show()
  document.body.inert = true
  testDialog.inert = false
})

modalOpener.addEventListener("click", evt => {
  testDialog.showModal()
  // modal inertness is implicit, and the following lines have no effect:
  document.body.inert = true
  testDialog.inert = false
})

document.getElementById("dialogCloser").addEventListener("click", evt => {
  testDialog.close()
  document.body.inert = null
  testDialog.inert = null
})

回答 #

核心结论 #

目前在Chrome/Edge等基于Blink的浏览器中，无法通过直接设置dialog.inert = false来解除从父元素（如document.body）继承的惰性状态。

原因解释 #

当给父元素设置inert = true时，浏览器会强制将其所有子元素标记为惰性——即使显式给子元素设置inert = false也无效。这是因为inert的继承是强制性的，子元素无法突破父级的惰性限制，当前浏览器实现并未完全遵循规范中“解除惰性状态”的描述。

可行替代方案 #

方案1：仅给非对话框元素设置inert

不要给整个body设置惰性，而是手动遍历body的直接子元素，给除对话框外的所有元素添加inert属性：

dialogOpener.addEventListener("click", evt => {
  testDialog.show();
  // 给body下非dialog的子元素设置inert
  Array.from(document.body.children).forEach(el => {
    if (el !== testDialog) {
      el.inert = true;
    }
  });
});

dialogCloser.addEventListener("click", evt => {
  testDialog.close();
  // 移除所有元素的inert状态
  Array.from(document.body.children).forEach(el => {
    el.inert = null;
  });
});

方案2：拆分页面内容与对话框容器

将页面主体内容放在独立容器中，对话框放在容器外，仅给内容容器设置inert：

<div id="mainContent">
  <button id="modalOpener">.showModal()</button>
  <button id="dialogOpener">.show()</button>
  <!-- 其他页面内容 -->
</div>
<dialog id="testDialog">
  <p>... Some HTML Top Layer-incompatible content here</p>
  <button id="dialogCloser">Close Dialog</button>
</dialog>

dialogOpener.addEventListener("click", evt => {
  testDialog.show();
  document.getElementById('mainContent').inert = true;
});

dialogCloser.addEventListener("click", evt => {
  testDialog.close();
  document.getElementById('mainContent').inert = null;
});

这两种方案都能实现showModal()的无障碍特性（其他元素惰性化），同时保证对话框内元素可正常交互，避免ReCaptcha等内容被顶层对话框遮挡的问题。

内容的提问来源于stack exchange，提问作者Jeremy Frey