<button commandfor="id" command="..."> — trigger actions on target elements via HTML attributes. Custom commands prefixed with -- dispatch a CommandEvent.
commandfor attribute links a button to a target element by ID.
The command attribute specifies the action. Built-in commands include show-modal, close,
toggle-popover, show-popover, and hide-popover.
Custom commands prefixed with -- dispatch a CommandEvent on the target — you handle it with a single event listener.
This replaces Bootstrap’s data-bs-toggle + event handler infrastructure entirely.
--toggle-fullscreenToggle fullscreen on any element using a custom invoker command. The button dispatches a CommandEvent — one event listener handles it.
This section goes fullscreen via command="--toggle-fullscreen".
--increment / --decrementCustom commands (prefixed with --) dispatch a CommandEvent on the target element. Only the event listener needs JS.
<!-- Fullscreen via custom command -->
<button commandfor="my-section" command="--toggle-fullscreen">
Toggle Fullscreen
</button>
<section id="my-section">...</section>
<!-- Counter via custom commands -->
<button commandfor="counter" command="--increment">+</button>
<button commandfor="counter" command="--decrement">-</button>
<span id="counter">0</span>
<script>
// Fullscreen handler — 5 lines
const section = document.getElementById('my-section');
section.addEventListener('command', (e) => {
if (e.command === '--toggle-fullscreen') {
if (document.fullscreenElement) document.exitFullscreen();
else section.requestFullscreen();
}
});
// Counter handler — 5 lines
const counter = document.getElementById('counter');
counter.addEventListener('command', (e) => {
let n = parseInt(counter.textContent);
if (e.command === '--increment') n++;
if (e.command === '--decrement') n--;
if (e.command === '--reset') n = 0;
counter.textContent = n;
});
</script>