10 replies

1. Nathan Knowler 18 min later

   @zachleat `<a href=spoiler>Spoiler</a>`

   Progressively enhance that.

2. Steve Frenzel 20 min later

   @zachleat maybe this helps?

   https://www.scottohara.me/blog/2024/08/22/spoiler.html

   1. Zach Leatherman 29 min later

      @stvfrnzl *excellent* thank you! (and @scottohara too)

      1. Curtis Wilcox 13 hr later

         @zachleat
         Also not in web component form but this is my take on a spoiler pattern.

         `visibility: hidden` keeps the content hidden from everyone until it's used.

         https://codepen.io/ccwilcox/pen/wvXxzNG

         @stvfrnzl @scottohara

         1. Zach Leatherman 23 hr later

            @cwilcox808 @stvfrnzl @scottohara oh my this code would be excellent for a web component (would have the extra benefit of for-free init for any later injected content too)

            1. Curtis Wilcox 1 day later

               @zachleat
               Here's a web component version. I fumbled my way through making this custom element by cribbing from from others.

               Using :has() with :host didn't seem to work so I'm glad I had already included a fallback for browsers that didn't support it.

               Because of the click listener, I wouldn't use it for interactive content though links should be fine.

               https://codepen.io/ccwilcox/pen/ZEgKvea
               @stvfrnzl @scottohara

               1. Zach Leatherman 1 day later

                  @cwilcox808 @stvfrnzl @scottohara oh my—you went much deeper than I expected! nice work! I was just expecting a super simple custom element with light dom 😅

                  1. Curtis Wilcox 2 days later

                     @zachleat
                     Yeah, I took it as an opportunity to try making one that used Shadow DOM.

                     Now I've made a lowest effort Light DOM version, it only replaces the querySelectorAll() and forEach() calls with creating the class and defining the element.

                     I also made a collection for the 'pens (including a fork of Scott's). I want to do at least one more variant, a Light DOM version that at least adds the button for you.

                     https://codepen.io/ccwilcox/pen/QWegKEy

                     https://codepen.io/collection/YymdGm

                     @stvfrnzl @scottohara

                     1. Zach Leatherman 2 days later

                        @cwilcox808 @stvfrnzl @scottohara excellent work!

                        1. Curtis Wilcox 3 days later

                           @zachleat
                           I made a fancier light DOM version. Like the Shadow DOM version, you only need to use <spoil-er>, the rest of what is needed is automatically added.

                           I think how it adds the button is okay but I'm a little unsure about how it wraps the content in a span.

                           https://codepen.io/ccwilcox/pen/RwXgGjz

                           @stvfrnzl @scottohara