Dialog Example
Using command attributes to control a dialog:
<button command="show-modal" commandfor="example-dialog">Open Modal Dialog</button> <dialog id="example-dialog"> <h3>Example Dialog</h3> <p>This is a modal dialog controlled by the command and commandfor attributes.</p> <button command="close" commandfor="example-dialog">Close Dialog</button> </dialog>
Popover Example
Using command attributes to control a popover:
Example Popover
This is a popover controlled by the command and commandfor attributes.
<button command="toggle-popover" commandfor="example-popover">Toggle Popover</button> <button command="show-popover" commandfor="example-popover">Show Popover</button> <button command="hide-popover" commandfor="example-popover">Hide Popover</button> <div id="example-popover" popover> <h3>Example Popover</h3> <p>This is a popover controlled by the command and commandfor attributes.</p> <button command="hide-popover" commandfor="example-popover">Close</button> </div>
Custom Command Example
Using custom commands to create a theme switcher:
Theme Controller
This box changes its theme based on the buttons below.
<div id="theme-demo"> <h3>Theme Controller</h3> <p>This box changes its theme based on the buttons below.</p> <button commandfor="theme-demo" command="--set-theme" value="light">Light Theme</button> <button commandfor="theme-demo" command="--set-theme" value="dark">Dark Theme</button> <button commandfor="theme-demo" command="--set-theme" value="custom">Custom Theme</button> </div> <script> const themeDemo = document.getElementById('theme-demo'); themeDemo.addEventListener('command', (event) => { if (event.command === '--set-theme') { const theme = event.source.value; themeDemo.setAttribute('data-theme', theme); } }); </script>
Command Event Information
This example shows information about the CommandEvent when triggering commands:
Command Event Demo
Click the buttons below to see command event details:
Click a button to see event details