A progressively-enhanced spoiler tag that works in any frontend. Built using web components.
no-spoilers
was built for my web component course, Component Odyssey. If you'd like to build your first web component library, then you can register your interest.
npm i no-spoilers
<script type="module">
import "no-spoilers/no-spoilers.js";
</script>
<no-spoilers>
<details>
<p>This is a spoiler</p>
</details>
</no-spoilers>
Note: no-spoilers
will not render if the child content is not a single details
element. This is to ensure that if JavaScript doesn't load, the behaviour fallasback to a standard details
element.
-
button-text
- Displays the text on the button that reveals the spoiler. Default: "Reveal Spoiler"
I'd like to shoutout this article by Scott O'Hara about building an accessible spoiler element. It was a great resource for improving this component.