demo · v132
Iframe Popover Test
Chrome 132 throws an InvalidStateError when showPopover(), hidePopover(), togglePopover(), showModal(), or close() are called on elements in a non-active document (e.g. a detached <iframe>). This page runs each method against active and inactive contexts so you can see exactly where the exception fires.
Running in active document context.
This popover is in the active document. ✓
showPopover() — active document
Call showPopover() on a <div popover> in this document. Should succeed.
—
showPopover() — detached element (no owner document)
Create a <div popover> with document.createElement() but do NOT append it. Call showPopover() — should throw InvalidStateError in Chrome 132+.
—
showModal() — active document
Call showModal() on a <dialog> in the active document. Should succeed.
—
showModal() — cloned element not in document
Clone the dialog, remove the clone from the document, call showModal(). Should throw InvalidStateError.
—
togglePopover() — detached
togglePopover() on an element not connected to any document. Chrome 132+ throws.
—
When each method throws
| Method | Active document | Not connected | Inactive iframe |
|---|---|---|---|
| showPopover() | ✓ works | InvalidStateError | InvalidStateError |
| hidePopover() | ✓ works | InvalidStateError | InvalidStateError |
| togglePopover() | ✓ works | InvalidStateError | InvalidStateError |
| showModal() | ✓ works | InvalidStateError | InvalidStateError |
| dialog.close() | ✓ works (if open) | InvalidStateError | InvalidStateError |
// ✓ Active document — works fine
const popover = document.querySelector('[popover]');
popover.showPopover(); // ← no error
// ✗ Detached element — throws in Chrome 132+
const detached = document.createElement('div');
detached.popover = 'auto';
// NOT appended to document
detached.showPopover();
// → InvalidStateError: Failed to show popover:
// element is not connected to an active document.
// ✗ Element from inactive iframe — also throws
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
document.body.removeChild(iframe);
// iframe.contentDocument is now inactive
const el = iframe.contentDocument.createElement('div');
el.popover = 'auto';
el.showPopover(); // → InvalidStateError