SaxonJS with web components

By Norm Tovey-Walsh on April 19, 2022 at 06:43p.m.

I haven’t worked with web components very much, though they’ve been on my “must explore more” list for a while. A couple of days ago, I stumbled across Shoelace, “a forward-thinking library of web components.”

“That’d just work in SaxonJS, right?”, I asked myself.

Yep. I updated the helloWorldJS repository that I created a while back to demonstrate it.

The new work is in the shoelace branch.

There’s not much different, really.

  1. The HTML file includes the Shoelace scripts and styling from its CDN. (A more robust application would want local copies, but this is just a toy.)
  2. Instead of using a button element, we use the Shoelace web-component: <sl-button>Click me</sl-button>.
  3. The match pattern for the onclick handler changes to match="sl-button".

That’s pretty much all there is to it. Neat. I must try out some more web components when I have a chance. In principle, the seem like a really good idea.