Invoker Commands API

Invoker Commands API

The Invoker Commands API provides a way to declaratively assign behaviours to buttons, allowing control of interactive elements when the button is enacted (clicked or invoked via a keypress, such as the spacebar or return key).

src

What does that mean though? Basically we have a possibly growing amount of declarative HTML that can add interactivity, without javascript 🤯

If you're a old and kind of clever like me this might trigger happy memories of the <marquee>Do you believe in love after love</marquee>

element

HTML attributes

commandfor

Turns a element into a button, controlling the given interactive element; takes the ID of the element to control as its value.

command

Specifies the action to be performed on an element being controlled by a control , specified via the commandfor attribute.

src

and an example from MDN

<button commandfor="mydialog" command="show-modal">Show modal dialog</button>

<dialog id="mydialog">

  <button commandfor="mydialog" command="close">Close</button>

  Dialog Content

</dialog>

So what's interesting about the above example, at least to me is it actually runs with javascript disabled!?! So only built in the browser commands will work, but I think this is cool. Really primitive elements that add a better UX to the user can now run in environments without javascript. Also this pattern has better Accessibility out of the box.

You can also write your own custom js events and handlers...

Creating custom commands

```Rotate left

Rotate right



js

Copy to Clipboard

const myImg = document.getElementById("my-img");

myImg.addEventListener("command", (event) => {

if (event.command == "--rotate-left") {

myImg.style.rotate = "-90deg";

} else if (event.command == "--rotate-right") {

myImg.style.rotate = "90deg";

}

});

I'm not 100% overall on how I feel about that though, maybe it helps lower level with creating interactive elements... Maybe it feels like too little too late, time will tell.