More Fun with Invoker Commands and Web Components

So I thought it would be fun to revisit the Invoker Commands API (MDN) which is available in Chromium-based browsers and hopefully coming soon to Safari and Firefox (both are currently in testing).

I’ve talked about this API before on the blog, and I continue to feel pretty excited about it since it’s the first truly declarative “click and see something happen!!” API we’ve ever seen on the web other than forms. I mean, think about it for a moment…isn’t it quite odd that there’s never been a way to write HTML (not JavaScript!) which says “when you click this button, do that thing”?!

Now we can do that nope we can’t do that if we’re inside shadow DOM and the button being clicked is supposed to do a thing via its host component. 😡

Le sigh…

But thankfully there’s always a workaround in the Wide World of the Web, so I’ve written up that workaround (and using Keith Cirkel’s cross-browser polyfill currently needed for invokers) and here’s a CodePen demonstrating it in action.