UI Lapisan Atas Persisten

Saat memindahkan elemen <dialog>, popover, atau layar penuh yang terbuka di DOM menggunakan metode tradisional seperti appendChild() atau insertBefore(), browser secara implisit menghapus elemen dari DOM dan menyisipkannya kembali. Penghapusan ini mereset status, sehingga menyebabkan modal, popover, dan elemen layar penuh yang terbuka ditutup secara tiba-tiba.

Untuk mengubah induk elemen lapisan atas tanpa mengganggu pengalaman pengguna atau menutupnya, gunakan moveBefore() API atomik.

Mengubah induk elemen lapisan atas yang terbuka

moveBefore() menggunakan dua argumen: node yang akan dipindahkan, dan node referensi yang akan disisipkan sebelum (atau null untuk ditambahkan ke akhir induk baru).

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);

Strategi penggantian

Karena moveBefore() adalah progressive enhancement, Anda HARUS menggunakan deteksi fitur sebelum memanggilnya. Untuk browser lama, Anda harus beralih ke reparenting tradisional.

WAJIB: Untuk elemen <dialog> di browser yang tidak didukung, langkah tradisional akan menutup dialog. Jika Anda ingin port tetap terbuka, Anda harus membukanya kembali secara manual setelah pemindahan.

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();
  }
}