refactor: update overlay stack logic to not rely on body children (#9738)

Author: web-padawan

packages/notification/src/vaadin-notification-mixin.js

@@ -46,13 +46,15 @@ export const NotificationContainerMixin = (superClass) =>
     _openedChanged(opened) {
       if (opened) {
         document.body.appendChild(this);
+        this._appendAttachedInstance();
         document.addEventListener('vaadin-overlay-close', this._boundVaadinOverlayClose);
         if (this._boundIosResizeListener) {
           this._detectIosNavbar();
           window.addEventListener('resize', this._boundIosResizeListener);
         }
       } else {
         document.body.removeChild(this);
+        this._removeAttachedInstance();
         document.removeEventListener('vaadin-overlay-close', this._boundVaadinOverlayClose);
         if (this._boundIosResizeListener) {
           window.removeEventListener('resize', this._boundIosResizeListener);

packages/overlay/src/vaadin-overlay-mixin.js

@@ -369,10 +369,12 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _animatedOpening() {
-      if (this.parentNode === document.body && this.hasAttribute('closing')) {
+      if (this._isAttached && this.hasAttribute('closing')) {
         this._flushAnimation('closing');
       }
       this._attachOverlay();
+      this._appendAttachedInstance();
+      this.bringToFront();
       if (!this.modeless) {
         this._enterModalState();
       }
@@ -392,7 +394,6 @@ export const OverlayMixin = (superClass) =>
       this._placeholder = document.createComment('vaadin-overlay-placeholder');
       this.parentNode.insertBefore(this._placeholder, this);
       document.body.appendChild(this);
-      this.bringToFront();
     }
 
     /** @private */
@@ -403,6 +404,7 @@ export const OverlayMixin = (superClass) =>
     /** @private */
     _finishClosing() {
       this._detachOverlay();
+      this._removeAttachedInstance();
       this.$.overlay.style.removeProperty('pointer-events');
       this.removeAttribute('closing');
       this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
@@ -413,7 +415,7 @@ export const OverlayMixin = (superClass) =>
       if (this.hasAttribute('opening')) {
         this._flushAnimation('opening');
       }
-      if (this._placeholder) {
+      if (this._isAttached) {
         this._exitModalState();
         this.setAttribute('closing', '');
         this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));

packages/overlay/src/vaadin-overlay-stack-mixin.js

@@ -4,12 +4,15 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+/** @type {Set<HTMLElement>} */
+const attachedInstances = new Set();
+
 /**
  * Returns all attached overlays in visual stacking order.
  * @private
  */
 const getAttachedInstances = () =>
-  Array.from(document.body.children)
+  [...attachedInstances]
     .filter((el) => el instanceof HTMLElement && el._hasOverlayStackMixin && !el.hasAttribute('closing'))
     .sort((a, b) => a.__zIndex - b.__zIndex || 0);
 
@@ -70,6 +73,16 @@ export const OverlayStackMixin = (superClass) =>
       return isLastOverlay(this);
     }
 
+    /**
+     * Returns true if this is overlay is attached.
+     *
+     * @return {boolean}
+     * @protected
+     */
+    get _isAttached() {
+      return attachedInstances.has(this);
+    }
+
     /**
      * Brings the overlay as visually the frontmost one.
      */
@@ -133,4 +146,16 @@ export const OverlayStackMixin = (superClass) =>
         }
       }
     }
+
+    /** @protected */
+    _appendAttachedInstance() {
+      attachedInstances.add(this);
+    }
+
+    /** @protected */
+    _removeAttachedInstance() {
+      if (this._isAttached) {
+        attachedInstances.delete(this);
+      }
+    }
   };