How to cheat with Web Components

Someone*, years ago, did a Web Component with the impossible name
<card-t> (because Web Components need a hyphen in the tag name)

It bundles 52 SVG cards in one single 16KB file!

Let's steal that one Web Component:

<script src="//cardmeister.github.io/elements.cardmeister.min.js">

We then use the Web Component <card-t> class definition
for our own <poker-card>:

<script>
customElements.whenDefined("cardt-t").then(() => {
  customElements.define( 
    "poker-card", 
    class extends customElements.get("card-t") {}
  )
});
</script>

And that's it, you now have 52 SVG playing cards available!

Without changing any source-code

<poker-hand>
  <poker-card suit=Hearts rank=Ace></poker-card>
  <poker-card suit=Hearts rank=King></poker-card>
  <poker-card suit=Hearts rank=Queen></poker-card>
  <poker-card suit=Hearts rank=Jack></poker-card>
  <poker-card suit=Hearts rank=10></poker-card>
</poker-hand>

And all you have to do is program a Poker Game... or Solitaire, or Hearts...

That old Repo with documentation & UNlicensed source: https://github.com/cardmeister/cardmeister.github.io

*) Me

---

---

Comments

[FRADAR]

Wow. oof