Invokers

Keith Cirkel demonstrates a brand new concept (requires Chrome Canary and the Experimental Web Platform Features flag right now) called Invokers, a proposal from the Open UI group that is polyfillable. You “invoke” events directly on a specific element in the DOM:

<button
  invoketarget="counter"
  invokeaction="increment"> + </button>

<h1 id="el">0</h1>Code language: HTML, XML (xml)

Then you can listen for the invoke event on that element.

el.addEventListener("invoke", (e) => {
  console.log(e.action); // increment
  // do stuff
});Code language: JavaScript (javascript)

Adding interactive functionality to HTML attributes seems to be aligned with the last decade of JavaScript frameworks.