A lot of CSS hackery later, and I've managed to construct a popover dialog using a <details> element that doesn't disrupt the button order and also doesn't require any JS to work!
Also, the 'cloned' text in the wrapper element is in an aria-hidden element, of course; I haven't quite figured out the correct ARIA roles for the expanding button (given that it's kind of a button but also kind of a summary). Suggestions welcome!
I *really* didn't want to stuff the menu full of fully-rendered forms for different operations, hence needing a popover that only asks for details when the user actually wants to take a particular action
Also, if this sounds like some cursed early-2000s browser compatibility hackery to you, you would be correct, because that's absolutely where I learned how to figure out tricks like these 🙃
@joepie91 nice! i tried to do this a while ago but couldn't get it to work
@lily Yeah it took me a good while to figure it out as well, probably a few hours - I made a lot of attempts at 'breaking out' the content element from the details element, which went nowhere, until I eventually realized that all I needed to do was reserve the right amount of space 🙃
The trick is that the <details> is contained within a wrapper div with identical styling to the <summary> (ie. the 'button') and identical text contents, except the wrapper div is invisible and position:relative, with the <details> being position:absolute and anchored against the wrapper's top left corner.
This means that the wrapper essentially 'reserves' the space for the button, while the <details> element can freely expand without disrupting anything because its absolute positioning takes it out of the content flow