UI del livello superiore persistente

Quando sposti un elemento <dialog>, popover o a schermo intero aperto nel DOM utilizzando metodi tradizionali come appendChild() o insertBefore(), il browser rimuove implicitamente l'elemento dal DOM e lo reinserisce. Questa rimozione reimposta lo stato, causando la chiusura improvvisa di finestre modali, popover ed elementi a schermo intero aperti.

Per riassegnare gli elementi di livello superiore senza interrompere l'esperienza utente o chiuderli, utilizza l'API atomica moveBefore().

Riassegnazione degli elementi di livello superiore aperti

moveBefore() accetta due argomenti: il nodo da spostare e un nodo di riferimento da inserire prima (o null da aggiungere alla fine del nuovo elemento principale).

const newParent = document.getElementById('new-container');
const dialogElement = document.getElementById('my-dialog');

// MANDATORY: Use moveBefore to ensure the <dialog> or popover stays open.
// Passing null appends it to the end of newParent.
newParent.moveBefore(dialogElement, null);

Strategie di riserva

Poiché moveBefore() è un potenziamento progressivo, DEVI utilizzare il rilevamento delle funzionalità prima di chiamarlo. Per i browser meno recenti, dovrai eseguire il fallback al reparenting tradizionale.

OBBLIGATORIO: per gli elementi <dialog> nei browser non supportati, lo spostamento tradizionale chiuderà la finestra di dialogo. Se vuoi che rimanga aperta, devi riaprirla manualmente dopo lo spostamento.

const targetParent = document.getElementById('target-container');
const popoverOrDialog = document.getElementById('my-top-layer-element');

// Check if moveBefore is supported
if ('moveBefore' in Element.prototype) {
  targetParent.moveBefore(popoverOrDialog, null);
} else {
  // Fallback: traditional move.
  // Note: This WILL close <dialog>, popover, and fullscreen elements.
  const wasOpen = popoverOrDialog.hasAttribute('open') || popoverOrDialog.matches(':popover-open');
  targetParent.insertBefore(popoverOrDialog, null);
  
  // Manually restore state if possible
  if (wasOpen && typeof popoverOrDialog.showModal === 'function') {
    popoverOrDialog.showModal();
  } else if (wasOpen && typeof popoverOrDialog.showPopover === 'function') {
    popoverOrDialog.showPopover();
  }
}