One drawback of details was that cmd+f search wouldn't play nicely when the details was closed. But now there's a hidden="until-found" you can put on child content, along with an associated event. So you can open the details when a user searches :) super useful

When you search text with ctrl+f it also searches inside details elements and automatically expands them!

> The details / summary thing absolutely kills me. There’s basically nothing you can’t do with them.

Animating the details element is tricky. By the spec, browsers don’t natively support transitions between display: none and display: block.

The details / summary feature can also be implemented with pure css without JavaScript. Here is an example: https://docs.go101.org/std/pkg/io.html, just click all "+" signs to expand contents.

We can also use pure css to implement tab panels. A demo: http://tmd.tapirgames.com/demos.html#section-demo-4

Modern css is powerful.

Fun fact: <details> even works on github and similar sites with markdown-based input. You can post large inline logs in issues without cluttering the conversation.

Details works even when it's set display:contents too, for even more flexibility. Can't animate from open›close, yet, though. That's pretty much my last frustration with it.

Do they work well for when you want to preview text? Like show the first 100 characters of a paragraph and then click to expand?

You can't actually control the open state properly from markup (the `open` attribute only sets the default state), which is why I haven't bothered with them.

Last I checked that without JavaScript details / summary has accessibility issues. That is, you need JS to add aria-open or similar.

It’s odd and frustrating that such an essential tag is not defined to be accessible, afaik.

You can’t force it to be always open on desktop and collapsible on mobile. That was a deal breaker for me.