Web features: [Invoker commands](https://webstatus.dev/features/invoker-commands) [Popover](https://webstatus.dev/features/popover) [\](https://webstatus.dev/features/dialog) > [!NOTE] > **Note:** These guides are authored for AI coding agents (apologies for the robotic tone!). To have your coding agent adopt these patterns automatically, check out [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance). Use the Invoker Commands API to toggle the visibility of `` and `[popover]` elements directly from HTML buttons, eliminating the need for custom JavaScript event listeners. By applying the `commandfor` (target ID) and `command` (action) attributes to a `

Popover content goes here.

``` If you need to control opening and closing with separate buttons, you can use the `show-popover` and `hide-popover` commands. **IMPORTANT:** Do NOT combine `popovertarget` and `commandfor` on the same `

This popover is explicitly opened and closed by separate buttons.

``` Hiding a popover, using a button inside the popover itself, will result in a loss of focus as the button will be hidden and won't retain focus. In this situation, provide additional scripting to return focus to the trigger/show control, so that people can continue to navigate from where they were previously. ## Implementing Declarative Modal Dialogs Unlike popovers, modal dialogs typically use separate buttons for opening and closing. Use the `show-modal` command specifically when you need to open a dialog as a modal. ```html

Are you sure you want to proceed?

 ``` ## Fallback strategies Because Invoker Commands and Popovers are not yet universally supported, you MUST use polyfills as fallbacks for older browsers. ### Polyfilling Invoker Commands MANDATORY: Feature detect support by checking for the `commandForElement` property on the `HTMLButtonElement` prototype. Do NOT check the window or document object. You MUST dynamically import the polyfill only when the native feature is missing. DO NOT unconditionally load the polyfill. Mandatory: Listen for the 'command' event directly on the target element because the native 'command' event does not bubble. **Option 1: Using a bundler** Install the polyfill via npm (`npm install invokers-polyfill`). This approach is for projects using a bundler (like Vite or Webpack) or import maps. For all other setups, use the CDN option below. ```javascript // MANDATORY: Feature detect 'commandForElement' on HTMLButtonElement.prototype. // Conditionally load the invokers-polyfill only in browsers lacking native support. if (!('commandForElement' in HTMLButtonElement.prototype)) { import('invokers-polyfill'); } ``` **Option 2: Using a CDN** For projects without a bundler, dynamically import the polyfill directly from a CDN inside a ` ``` **Invokers Polyfill Limitations** MANDATORY: This polyfill does not handle the ARIA states (e.g., `aria-expanded`) of the command button the way native browsers do. You are strongly encouraged to handle these states yourself to ensure your site is fully accessible. ```javascript // 2. Manually manage ARIA states in your listener document.getElementById('action-target').addEventListener('command', (event) => { const command = event.command; const target = event.target; const source = event.source; // The button that triggered the command if (command === '--spin') { const isSpun = target.classList.toggle('is-spun'); // Polyfill tip: Manually update ARIA to match the new state source?.setAttribute('aria-pressed', isSpun); } }); ``` ### Fallbacks \& browser support for Popover The Popover API is mostly **progressive enhancement** , but its defining behaviors --- top-layer promotion, light-dismiss, and `popovertarget` invocation --- have no CSS-only equivalent. Older browsers need a polyfill, or a manual fallback if you would rather not ship one. **Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTMLElement.prototype`, and load the polyfill **only** when native support is missing --- do NOT load it unconditionally. With a bundler or import map: ```javascript // MANDATORY: Feature detect 'popover' on HTMLElement.prototype. if (!Object.hasOwn(HTMLElement.prototype, "popover")) { import("@oddbird/popover-polyfill"); } ``` If not using a package manager, import from a CDN, e.g. `"https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js"`. Caveats when using the polyfill: - Do NOT use the `popover` IDL attribute for any code that may run before the polyfill is fully loaded. It will not be mirrored as an attribute, the popover will not be picked up by the polyfill, and the property will be shadowing the accessor the polyfill adds forever. Use `setAttribute()`/`removeAttribute()` instead. - **Styling caveat:** The polyfill cannot define the real `:popover-open` pseudo-class, so it applies a `.\:popover-open` class instead. **MANDATORY:** Combine the two with `:is()` or `:where()`, otherwise browsers that lack `:popover-open` discard the entire rule: ```css [popover]:is(:popover-open, .\:popover-open) { display: block; } ``` Source: [declarative-dialog-popover-control guide on GitHub](https://github.com/GoogleChrome/modern-web-guidance-src/blob/main/guides/ui-behaviors/declarative-dialog-popover-control/guide.md)