The HTML for a <details> element is generally something like:
<details>
<summary>Spoiler alert!</summary>
<p>Rosebud was a sled.</p>
<p>It's true!</p>
</details>Code language: HTML, XML (xml)See how I put two <p> elements in there? That’s totally fine. Everything that isn’t the <summary> is visually hidden until the <details> is open, either via the open attribute or the summary is clicked/tapped.
So if you’re trying to select “all the content”, you’re either forced to use a wrapper or use an awkward selector like details > *:not(summary). The newly-specced ::details-content looks like a nice fix for this. (hat tip).
Curious, in which concrete case would you use this new selector?
For things like details height animations, it still looks like a better idea to create a wrapper?
The HTML I showed I think is a pretty decent use case. Like if you wanted to animate the paragraphs opacity as the details element is opened or whatever.
Looks like a typo in the last sentence where you meant ::details-content instead of ::details-summary. 😉
Got that fixed — thank you Daniel.