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