Simplify with popover API?

[NullVoxPopuli]

https://twitter.com/Una/status/1729236000294174733

Support:

• https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
• https://caniuse.com/mdn-api_htmlelement_popover

[johanrd]

Yes, this seems like a nice path! Though, I guess it may be wise to wait for firefox to enable it by default.

[nickschot]

This would probably also fix where our a11y is currently lacking (no built-in connection between the toggle button and the menu)

[johanrd]

I was tempted to try it out a bit now, as I have very good experience with the popover api so far for other use cases (except this extremely silly safari bug).

Notes after trying: The use cases fit generally well for ember-mobile-menu, except popover's superpower of being placed in the browser top-layer means that ember-mobile-menu needs a different approach to shadowing and masking to support e.g. the iOS style where the menu is underneath:

This could of course be solvable with some masking and inset shadow, but posting as a note to consider anyways.