How to cheat with Web Components

#javascript #webdev #showdev #webcomponents

Someone*, years ago, did a Web Component <playing-card> (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 <playing-card> class definition
for our own <poker-card>:

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

And that's it, you now have 52 SVG <poker-card> cards available!

Without changing any <playing-card> 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>