04 / Popover commands

One command.
An internal popover.

Show, hide or toggle a popover inside a component.

outsidecommandfor="host"

host

shadow root

#panel

One public reference. An internal destination.

Preparing the controls…

Browser details

Current path: Checking browser support…
Native API surface: Checking…
Active adapters: Waiting for setup…

Automatic checks for the native property. Force fallback loads the selected adapters. Browser alone leaves them out.

Popover commands

Commands can be canceled

Send built-in popover commands to an internal panel.

Cancel the next command

Try: Select “Cancel the next command,” then Show twice.

DOM observationWaiting for setup.

Behavior & limits

The first Show is canceled; the second opens the panel. Hide and Toggle exercise the other built-in commands.

The fallback uses native popover methods after dispatching a synthetic cancelable command event. Event trust, paths and source handling can differ from native behavior.

Code sample

Three commands share one target. The demo also listens for cancellation.

<button id="pc-toggle" type="button" commandfor="pc-host"
    command="toggle-popover">Toggle with a command</button>
<button id="pc-show" type="button" commandfor="pc-host"
    command="show-popover">Show with a command</button>
<button id="pc-hide" type="button" commandfor="pc-host"
    command="hide-popover">Hide with a command</button>
<rt-popover-command-demo id="pc-host" data-reference-target="pc-panel">
  <template shadowrootmode="open" shadowrootreferencetarget="pc-panel">
    <section id="pc-panel" popover="manual" role="dialog"
        aria-labelledby="pc-panel-title">
      <h2 id="pc-panel-title">A panel with a say</h2>
      <button type="button" autofocus>Close from inside</button>
    </section>
  </template>
</rt-popover-command-demo>

Functional JavaScript sizes

Functional page JavaScript

5.185 KB 2.286 KB gzip

Always loaded.

Fallback additional

19.208 KB 6.967 KB gzip

Core + selected adapters.

Fallback route total

24.393 KB 9.253 KB gzip

Always-loaded and fallback files; shared files counted once.

Native-surface route total

6.174 KB 2.824 KB gzip

Includes 0.989 KB (0.538 KB gzip) of behavioral probes requested only after the property surface is present.

Minified / gzip. 1 KB = 1,000 bytes. Demo-only syntax highlighting is excluded from the functional totals and reported separately below.

HTML document

15.372 KB 1 request

Generated markup, including these measurements.

Initial supporting assets

21.802 KB raw 21.179 KB local transfer · 4 requests

Styles, icon, and the highlighting scheduler; functional JS is separate above.

Initial page with fallback

61.567 KB raw 45.804 KB local transfer · 10 requests

Document + functional fallback path + initial supporting assets, with unique files counted once.

Deferred highlighting

16.700 KB raw 7.831 KB local transfer · 8 requests

Engine, theme, and this page’s grammar closure, requested after a source disclosure opens or during idle time.

“Local transfer” matches the included development server: gzip JavaScript sidecars, but uncompressed HTML, CSS, and SVG. GitHub Pages, browser caching, HTTP headers, and production compression can change transferred bytes and request scheduling. Module preloads fetch functional modules early without evaluating the app and do not add duplicate transfers.

Inspect the 6 generated JavaScript files

Selected adapters: popover-commands.

Gzip totals sum each compressed file. The fallback and native-probe routes are mutually exclusive. Separate CSS files, HTML, JSON, source maps, HTTP headers, and Microlighter assets are excluded. Component styles embedded in JavaScript are included. Transfer sizes depend on compression and caching. Microlighter MIT license.

Files included in this page’s totals
File	Delivery	Minified	Gzip
`popover-commands/main.js`	Page	3.257 KB	1.351 KB
`shared/chunks/app-NKBZQNH6.js`	Page	1.786 KB	0.797 KB
`shared/chunks/chunk-CLCOZ6O7.js`	Fallback / native probe shared	0.849 KB	0.422 KB
`shared/chunks/chunk-S2QLMWTP.js`	Page	0.142 KB	0.138 KB
`shared/chunks/detect-X6QVIAY4.js`	Native-surface probe	0.140 KB	0.116 KB
`shared/chunks/reference-target.setup-LPCOCIRI.js`	Fallback additional	18.359 KB	6.545 KB

Inspect the size manifest

Implementation notes & limitations

Fallback scope

Requires the browser’s Popover API. Custom commands and complete native event semantics are outside this adapter’s scope.

Readouts describe DOM state. Check computed names, keyboard behavior and assistive technology separately.