Has anyone made a disclosure/content-warning/spoilers web component?

[zachleat@fediverse.zachleat.com]

Has anyone made a disclosure/content-warning/spoilers web component?

[deafferret@octodon.social]

@zachleat I think there’s a WP plugin for that.

[nickcolley@toot.cat]

@zachleat I guess the details element is sorta that?

[zachleat@fediverse.zachleat.com]

@nickcolley kind of! I think the design/UX could be a bit more specific here

[zachleat@fediverse.zachleat.com]

@deafferret I just can’t defederret you, jay

[stvfrnzl@mastodon.online]

@zachleat maybe this helps?

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

[zachleat@fediverse.zachleat.com]

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

[cwilcox808@c.im]

@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

[zachleat@fediverse.zachleat.com]

@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)

[cwilcox808@c.im]

@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

[zachleat@fediverse.zachleat.com]

@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

[cwilcox808@c.im]

@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

[zachleat@fediverse.zachleat.com]

@cwilcox808 @stvfrnzl @scottohara excellent work!