如何使自定义DevTool始终置于#top-layer之上并保持可交互性？

我开发了一个DevTool，通过以下CSS设置使其置于所有元素之上：

.devTool {
  position: fixed;
  z-index: 99999;
}

但当以模态模式打开<dialog />元素后，该DevTool失效，用户无法与其交互。原因是新的top-layer概念会置于所有元素之上。

请问是否存在办法确保我的DevTool始终置于所有元素（包括模态对话框）之上并保持可交互？

方法1：将DevTool加入top-layer集合 #

现代浏览器（Chrome 110+、Firefox 118+等）支持document.topLayer API，这个集合是浏览器管理模态对话框、全屏元素等顶级层元素的容器，后加入的元素会自动排在更上层。

1. JavaScript代码：

const devTool = document.querySelector('.devTool');
// 初始将DevTool加入top-layer
document.topLayer.add(devTool);

// 监听dialog打开事件，确保DevTool始终在新打开的对话框之上
document.addEventListener('dialog', (e) => {
  if (e.target.open) {
    document.topLayer.add(devTool);
  }
}, true);

2. 覆盖top-layer默认样式：
   加入top-layer的元素会被浏览器默认设置position: fixed; inset: 0;，需要用CSS覆盖以保留DevTool原有定位：

.devTool {
  position: fixed !important;
  /* 保留你的原有定位设置 */
  top: 10px;
  right: 10px;
  z-index: 99999;
  /* 其他自定义样式 */
}

方法2：通过ElementInternals管理（适合自定义元素） #

如果你的DevTool是自定义Web Component，可以使用ElementInternals.setTopLayer()方法将元素加入top-layer，更符合组件化开发逻辑：

class DevTool extends HTMLElement {
  constructor() {
    super();
    this.internals = this.attachInternals();
  }

  connectedCallback() {
    // 加入top-layer
    this.internals.setTopLayer(true);
    
    // 监听dialog打开，重新设置top-layer确保优先级
    document.addEventListener('dialog', (e) => {
      if (e.target.open) {
        this.internals.setTopLayer(true);
      }
    }, true);
  }
}
customElements.define('dev-tool', DevTool);

方法3：降级兼容方案（针对旧浏览器） #

对于不支持top-layer API的旧浏览器，可以通过调整DOM顺序和z-index提升优先级（仅对非top-layer的模态框有效）：

const devTool = document.querySelector('.devTool');
document.addEventListener('dialog', (e) => {
  if (e.target.open) {
    // 将DevTool移到body最后，确保DOM顺序最靠后
    document.body.appendChild(devTool);
    // 设置更高的z-index
    devTool.style.zIndex = '999999';
  }
}, true);

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