A few months ago I created a card game called Nimcard using web components. While making it, I had realized it may be possible to create a reusable playing card, a
playing-card element if you will!
<playing-card value="7" suit="s"></playing-card>
The code is a decent example of creating and testing a web component while keeping accessibility in mind, as well as how to integrate Typescript if that's important to you!
playing-card. The lack of an intermediary build step makes both development and the shipped code simpler.
Second, while it's not so bad to make an element reusable, it's a ton harder to make it generic. I remember thinking about questions like:
- What if I want a different back-of-card pattern?
- What if I want to use my own shapes for the suits?
- What if I want a customized flip animation?
In the end I ignored these questions because it was impractical to solve for the world when all I wanted was some cards for one game.
I'd love to see how people here have used web components! I've tagged this post with
#showcase, which we can use for sharing what we've built 😊