Dialog Polyfill

import dialogPolyfill from 'dialog-polyfill';

const dialogPolyfill = require('dialog-polyfill');

<script src="node_modules/dialog-polyfill/dist/dialog-polyfill.js"></script>
<!-- dialogPolyfill is now available globally -->

<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dist/dialog-polyfill.css" />

import dialogPolyfill from 'dialog-polyfill';

// Create a dialog element
const dialog = document.createElement('dialog');
dialog.innerHTML = `
  <p>This is a dialog!</p>
  <form method="dialog">
    <button type="submit">Close</button>
  </form>
`;
document.body.appendChild(dialog);

// Register the dialog with the polyfill
dialogPolyfill.registerDialog(dialog);

// Now the dialog can be used with native API
dialog.showModal(); // Shows as modal with backdrop
dialog.show();      // Shows as non-modal
dialog.close();     // Closes the dialog

/**
 * Registers a dialog element for polyfill functionality.
 * Only applies polyfill if native support is not available.
 * @param dialog - The dialog element to register
 */
function registerDialog(dialog: HTMLDialogElement): void;

/**
 * Forces registration even when native support exists.
 * Shows console warning when native support is detected.
 * @param dialog - The dialog element to force register
 */
function forceRegisterDialog(dialog: HTMLDialogElement): void;

// Standard registration (recommended)
const dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog);

// Force registration for testing
dialogPolyfill.forceRegisterDialog(dialog);

/**
 * Shows the dialog as non-modal (user can interact with page)
 */
show(): void;

/**
 * Shows the dialog as modal with backdrop (blocks page interaction)
 * @throws Error if dialog is already open or not in DOM
 */
showModal(): void;

/**
 * Closes the dialog and optionally sets return value
 * @param returnValue - Optional return value to set
 * @throws Error if dialog is not open
 */
close(returnValue?: string): void;

// Show as non-modal dialog
dialog.show();
console.log(dialog.open); // true

// Show as modal dialog with backdrop
dialog.showModal(); // Adds backdrop, traps focus

// Close with return value
dialog.close('cancelled');
console.log(dialog.returnValue); // 'cancelled'

/**
 * Boolean indicating if dialog is currently open
 */
open: boolean;

/**
 * String value returned when dialog is closed via form submission
 */
returnValue: string;

<!-- Form with method="dialog" closes containing dialog -->
<dialog>
  <form method="dialog">
    <button type="submit" value="ok">OK</button>
    <button type="submit" value="cancel">Cancel</button>
  </form>
</dialog>

dialog.addEventListener('close', function() {
  console.log('Dialog closed with value:', dialog.returnValue);
});

// HTML form with method="dialog" will automatically close dialog
// and set returnValue to the clicked button's value

/**
 * Fired when dialog is closed via close() method
 * Event properties: bubbles: false, cancelable: false
 */
'close': Event;

/**
 * Fired when Escape key is pressed in modal dialog
 * Event properties: bubbles: false, cancelable: true
 * If not prevented, closes the dialog
 */
'cancel': Event;

// Listen for dialog close
dialog.addEventListener('close', function(event) {
  console.log('Dialog was closed');
});

// Prevent dialog close on Escape key
dialog.addEventListener('cancel', function(event) {
  event.preventDefault(); // Dialog stays open
});

/* Base dialog element styles */
dialog {
  position: absolute;
  left: 0; right: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
  display: block;
}

/* Hide dialogs when not open */
dialog:not([open]) {
  display: none;
}

/* Backdrop element inserted after modal dialogs */
dialog + .backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.1);
}

/* Helper class for fixed positioning */
dialog.fixed {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}

/* Internal overlay for modal management (do not style directly) */
._dialog_overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}

<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dist/dialog-polyfill.css" />

<!-- Apply fixed positioning helper class -->
<dialog class="fixed">
  <p>This dialog will be centered regardless of scroll position</p>
</dialog>

<!-- Style the backdrop -->
<style>
dialog + .backdrop {
  background: rgba(0,0,0,0.5);
}
</style>

/**
 * Repositions dialog to center it vertically in viewport
 * @param element - Dialog element to reposition
 */
function reposition(element: HTMLDialogElement): void;

/**
 * Determines if dialog needs automatic centering
 * @param dialog - Dialog element to check
 * @returns true if dialog should be auto-centered
 */
function needsCentering(dialog: HTMLDialogElement): boolean;

/**
 * Checks if dialog positioning is set via CSS rules
 * @param element - Dialog element to check
 * @returns true if top/bottom positioning found in stylesheets
 */
function isInlinePositionSetByStylesheet(element: HTMLDialogElement): boolean;

/**
 * Constructor for the dialog manager system
 * Creates a new dialog manager instance with modal stacking capabilities
 */
new DialogManager(): DialogManager;

interface DialogManager {
  /** Array of currently stacked modal dialogs */
  pendingDialogStack: Array<any>;
  /** Overlay element for modal backdrop management */
  overlay: HTMLElement;
  /** Blocks document interaction when first modal is shown */
  blockDocument(): void;
  /** Restores document interaction when last modal is closed */
  unblockDocument(): void;
  /** Updates z-index stacking for all open dialogs */
  updateStacking(): void;
  /** Adds a dialog to the modal stack */
  pushDialog(dialogInfo: any): boolean;
  /** Removes a dialog from the modal stack */
  removeDialog(dialogInfo: any): void;
}

/**
 * Global dialog manager instance
 */
dm: DialogManager;

/**
 * Tracks the form submitter element for method="dialog" forms
 * Used internally for form submission handling
 */
formSubmitter: HTMLElement | null;

/**
 * Stores click coordinates for image input submissions
 * Format: "x,y" coordinates for <input type="image"> elements
 */
imagemapUseValue: string | null;

dialog.fixed {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}

// showModal() errors
'Failed to execute \'showModal\' on dialog: The element is already open'
'Failed to execute \'showModal\' on dialog: The element is not in a Document'
'Failed to execute \'showModal\' on dialog: There are too many open modal dialogs'

// close() errors  
'Failed to execute \'close\' on dialog: The element does not have an \'open\' attribute'

// forceRegisterDialog() errors
'Failed to register dialog: The element is not a dialog'

interface DialogManager {
  pendingDialogStack: Array<any>;
  overlay: HTMLElement;
  blockDocument(): void;
  unblockDocument(): void;
  updateStacking(): void;
  pushDialog(dialogInfo: any): boolean;
  removeDialog(dialogInfo: any): void;
}

interface DialogPolyfillType {
  registerDialog(dialog: HTMLDialogElement): void;
  forceRegisterDialog(dialog: HTMLDialogElement): void;
  reposition(element: HTMLDialogElement): void;
  needsCentering(dialog: HTMLDialogElement): boolean;
  isInlinePositionSetByStylesheet(element: HTMLDialogElement): boolean;
  DialogManager: new () => DialogManager;
  dm: DialogManager;
  formSubmitter: HTMLElement | null;
  imagemapUseValue: string | null;
}

// Enhanced HTMLDialogElement with polyfill methods
interface HTMLDialogElement extends HTMLElement {
  open: boolean;
  returnValue: string;
  show(): void;
  showModal(): void;
  close(returnValue?: string): void;
}