<bbq-spoiler> Web Component
Published on .A few weeks ago I started doing Weeknotes in here and I'm really enjoying it. But whenever I wanted to write about something I watched or played that I didn't want to spoil for visitors, I would just skip it, which is not ideal because I do want to log all my thoughts about what interests me in the moment!
To fix this, today I created the first version of a simple Web Component that initially hides the spoilery text and only reveals it when clicking the hidden block.
I called it <bbq-spoiler>.
Here's how it's used:
My favourite film of 2025 is <bbq-spoiler>'One Battle After Another'</bbq-spoiler>And the result:
My favourite film of 2025 is
.
Notes #
- Accessibility: screen readers announce "Spoiler" instead of the spoilery text.
- Copiable: the hidden/spoilery text can still be copied.
- Built for this site: I kept it simple by writing this component specifically for my website. But it should be easy to grab the source code and modify it to your needs. Just view-source this page!