WebComponent iteration

[davidje13]

Hi @scottjehl; I came across your recent article Building a QR Code HTML Web Component. It's great that you found Lean QR useful! Your article was interesting and got me wondering about how a Web Component API could be built in to Lean QR itself (and how to make it flexible / unoppinionated enough to be widely applicable).

I've put together a (nearly) full-featured element LeanQRElement, and documented it here. The gist is that it can take a value or a for attribute (with for being used to link the QR code to other elements — such as links — for the use-case in your article). It can be used like this:

<script
  src="https://cdn.jsdelivr.net/npm/lean-qr@2.4.0/webcomponent.mjs"
  integrity="sha384-L1udibYX2Bx6aseKv8cF5fMaRbSQxvYEWAAN1l7hzBly5Ez0nnWsRQvNz0ipYPTf"
  type="module"
></script>

<a href="https://scottjehl.com" id="my-website">My Website</a>
<lean-qr for="my-website" style="width: 100px">Enable Javascript to see this link as a QR code</lean-qr>

I'd love to know if you have any feedback on this API / implementation. The code itself has some quirks because Lean QR favours minification (the import which includes the library + webcomponent wrapper is 10kB / 5kB compressed), but hopefully it's quite readable.

(I've done a bit of a "soft release" with this in 2.4.0, but I think it could eventually be nice to push this as the recommended "browser native" way to use Lean QR in the future; once the API / behaviour are stable)

[scottjehl]

That’s so great, @davidje13! Thanks for letting me know. I think the for attribute is an interesting idea. I’ll have to take a look at it more when I get some time. Cheers!