<poker-card> extends CardMeister

by WebComponents

HTML

<script src="https://cardmeister.github.io/elements.cardmeister.min.js"></script>
<script>
  // WCQ
  customElements.define("poker-card",
    class extends customElements.get("playing-card") {
      connectedCallback() {
        console.log('<poker-card> attributes:',this.attributes);
        super.connectedCallback();
        // add your own code *after* the IMG is displayed
      }
    })
</script>
<style>
  poker-hand { /* UNdefined Custom Element! great for layout and styling */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1em;
  }
</style>
<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>

<a href="https://cardmeister.github.io">CardMeister.github.io</a>

CSS

body{
  padding:0;
  margin:0;
}
poker-hand{
  padding:1em;
  background-image: url(data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAAAwBACdASoeAB4APikSh0KhoQoCAAwBQllYz41AABFV/n8AItOaJepDavAA/vkKUe5BGtPR5aeKP/4hd7G2///gzv/f1X/gzv/BmUX9cJtST/Z9T/XsQq/MQV+1v8m2uukhu3nFYS/A5iTPpyXsMLAwk6xasWWFDPdx7OkWouLHKfqaoozRIW3R5D5MAA==);
    background-size: cover;
}