Agent Wranglers

Interface Optional

Wire buttons without click handlers

Connect buttons to popovers and dialogs in HTML with commandfor and command. Keep a fallback for older browsers.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Use <button commandfor="menu" command="toggle-popover">. Where command is unsupported, add popovertarget="menu" from script.

Example

<button commandfor="menu" command="toggle-popover">Menu</button>
<nav popover id="menu">…</nav>
<script>
  if (!('command' in HTMLButtonElement.prototype))
    for (const b of document.querySelectorAll('[command="toggle-popover"]'))
      b.setAttribute('popovertarget', b.getAttribute('commandfor'));
</script>

How to check

In supporting browsers, the button works with JavaScript off.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/interface/invoker-commands.