Dialog

Cancels and closes the dialog, typically in response to user actions like clicking outside the dialog or pressing ESC.

This method fires a cancelable cancel event before closing. The dialog will only close if the event is not prevented. After canceling, the dialog fires a close event.

• Called automatically when user presses ESC or clicks outside the dialog
• Can be called programmatically to cancel dialog programmatically
• Fires cancel event (cancelable) before closing
• Use close() instead for explicit user actions (like clicking a button)

const dialog = document.querySelector('rh-dialog');
dialog.cancel(); // Cancels with no return value
dialog.cancel('user-cancelled'); // Cancels with return value

Programmatically sets the trigger element for the dialog.

This method assigns an element as the dialog's trigger and attaches click event listeners. When the trigger is clicked, the dialog opens. Use this when you need to dynamically change the trigger element or set a trigger that isn't specified via the trigger attribute.

• Use when trigger element is dynamically created or changed
• Automatically adds click listener to open dialog
• Replaces any previously set trigger element
• Useful for programmatic trigger management in dynamic UIs

• Ensure trigger element has appropriate accessible name
• Trigger should clearly indicate it will open a dialog

const dialog = document.querySelector('rh-dialog');
const button = document.querySelector('#my-button');
dialog.setTrigger(button);

Manually toggles the dialog.

dialog.toggle();

Manually opens the dialog.

dialog.show();

Opens the dialog in modal mode.

This method opens the dialog as a modal, which means it appears on top of other content and prevents interaction with the rest of the page until closed. This is the standard way to open a dialog.

• Use for important dialogs requiring user action before continuing
• Modal dialogs block interaction with underlying content
• Automatically manages focus and prevents background scrolling
• Fires an open event when the dialog opens

• Focus automatically moves to the dialog when opened
• Background content becomes inert (non-interactive)
• Users can close with ESC key or by clicking outside (if not prevented)

const dialog = document.querySelector('rh-dialog');
dialog.showModal();

Manually closes the dialog.

dialog.close();