如何调整浏览器Top-layer中Web组件对话框的层级顺序？

我使用wc-notifier组件展示错误信息，当前已有一条错误信息“Oh no existing error!”显示。随后弹出的wc-modal-form表单模态框错误地显示在错误信息上方（错误信息应处于上层）；点击“Validate Form”按钮新增的错误信息也会显示在模态框下方。尝试过调整组件定义、创建、打开对话框的顺序，仍无法解决，请问如何调整浏览器Top-layer中元素的顺序？

原代码 #

HTML #

<template id="TEMPLATE_notifier">
  <style>
      dialog {
         display: flex;
         gap: 16px;
         flex-direction: column;         
         border: none;
         background: none;
         top: 0;
         margin-left: auto;
         margin-right: 0;
      }
      ::slotted(*) {
         background: red;
         padding: 16px 8px;
      }
      </style>
  <dialog>
     <slot></slot>
  </dialog>
</template>

<wc-notifier id="NOTIFIER"></wc-notifier>

<template id="TEMPLATE_modalform">
  <style>
      dialog {
          background: cream;
          padding: 64px;
          width: 100%;
      }
  </style>
  <dialog id="MODAL">
      <div>This is the FORM MODAL. It should appear below the errors</div>
      <button id="VALIDATE" type="button" onclick="document.getElementById('NOTIFIER').error('Please fill out all the required form fields')">Validate Form</button> 
  </dialog>
</template>

JavaScript #

class NotifierComponent extends HTMLElement {
  constructor() {
      super().attachShadow({mode:'open'});
      const template = document.getElementById("TEMPLATE_notifier");
      this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  error(msg) {
      const errorEl = document.createElement('div');
      errorEl.innerText = msg;
      this.appendChild(errorEl)
  }
}
window.customElements.define('wc-notifier', NotifierComponent);

document.getElementById("NOTIFIER").error("Oh no existing error!")

class FormModalComponent extends HTMLElement {
  constructor() {
      super().attachShadow({mode:'open'});
      const template = document.getElementById("TEMPLATE_modalform");
      this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  showModal() {
      this.shadowRoot.getElementById("MODAL").showModal();
  }
}
window.customElements.define('wc-modal-form', FormModalComponent);

const modalFormEl = document.createElement('wc-modal-form');
document.body.appendChild(modalFormEl)
modalFormEl.showModal();

解决方案 #

浏览器的Top-layer元素层级由调用showModal()的顺序决定：后调用的元素会叠加在之前的元素上方。你的问题核心是通知组件的<dialog>未调用showModal()进入Top-layer，仅以普通布局渲染，而表单模态框进入了Top-layer，因此会覆盖通知。

修复步骤 #

• 让通知组件的<dialog>调用showModal()进入Top-layer，同时调整样式避免全屏遮罩。
• 在表单模态框打开、新增错误时，重新调用通知<dialog>的showModal()，确保它始终处于Top-layer最上层。

修改后的代码 #

JavaScript

class NotifierComponent extends HTMLElement {
  constructor() {
      super().attachShadow({mode:'open'});
      const template = document.getElementById("TEMPLATE_notifier");
      this.shadowRoot.appendChild(template.content.cloneNode(true));
      // 获取内部dialog并加入Top-layer
      this.dialogEl = this.shadowRoot.querySelector('dialog');
      this.dialogEl.showModal();
      // 移除默认遮罩和背景
      this.dialogEl.style.backdropFilter = 'none';
      this.dialogEl.style.background = 'transparent';
  }
  error(msg) {
      const errorEl = document.createElement('div');
      errorEl.innerText = msg;
      this.appendChild(errorEl);
      // 新增错误时重新入栈，保持最上层
      this.dialogEl.showModal();
  }
}
window.customElements.define('wc-notifier', NotifierComponent);

document.getElementById("NOTIFIER").error("Oh no existing error!")

class FormModalComponent extends HTMLElement {
  constructor() {
      super().attachShadow({mode:'open'});
      const template = document.getElementById("TEMPLATE_modalform");
      this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  showModal() {
      this.shadowRoot.getElementById("MODAL").showModal();
      // 打开模态框后，让通知回到最上层
      document.getElementById("NOTIFIER").dialogEl.showModal();
  }
}
window.customElements.define('wc-modal-form', FormModalComponent);

const modalFormEl = document.createElement('wc-modal-form');
document.body.appendChild(modalFormEl)
modalFormEl.showModal();

HTML（优化样式）

<template id="TEMPLATE_notifier">
  <style>
      dialog {
         display: flex;
         gap: 16px;
         flex-direction: column;         
         border: none;
         background: transparent;
         top: 16px;
         right: 16px;
         margin: 0;
         position: fixed;
         max-width: 300px;
      }
      ::slotted(*) {
         background: red;
         color: white;
         padding: 16px 8px;
         border-radius: 4px;
      }
      </style>
  <dialog>
     <slot></slot>
  </dialog>
</template>

<wc-notifier id="NOTIFIER"></wc-notifier>

<template id="TEMPLATE_modalform">
  <style>
      dialog {
          background: #fff;
          padding: 64px;
          width: 80%;
          max-width: 600px;
          border-radius: 8px;
          border: none;
      }
  </style>
  <dialog id="MODAL">
      <div>This is the FORM MODAL. It should appear below the errors</div>
      <button id="VALIDATE" type="button" onclick="document.getElementById('NOTIFIER').error('Please fill out all the required form fields')">Validate Form</button> 
  </dialog>
</template>

核心原理 #

• 只有调用showModal()的<dialog>才会进入浏览器Top-layer，Top-layer内的元素层级由最后一次调用showModal()的时间决定，后调用的元素层级更高。
• 通知组件的<dialog>必须进入Top-layer，否则会被其他Top-layer元素覆盖。
• 在表单模态框打开、新增错误时重新调用showModal()，可以让通知组件的<dialog>重新排到Top-layer最上层，确保错误信息始终显示在模态框上方。

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