mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

323K
active users

Is there some way to make a `popover` behave like a dialog when it comes to making the document `inert`?

I tried setting `body.inert` but then the `popover` also becomes inert. Looks like the `dialog` element is magic in that it makes the entire page inert EXCEPT for itself, but you can't do that for other elements?

(I could use a dialog instead of a popover, but it's not really the right element semantically...)

(Edit: Oh I'm using the Popover API)

@hdv maybe you know since you've done a lot of research into popover vs dialog?

@rgadellaa semantically, popover doesn't change anything, a popover can have dialog semantics or other semantics (see hidde.blog/popover-semantics/)

if you're wanting to make the rest of the page inert it sounds like you want a modal dialog, which is what a <dialog> provides when opening it with showModal()

Hidde's blogSemantics and the popover attribute: which role to use when?The popover attribute adds behaviour, but not a role. Which role should you use in combination with the popover attribute?

@hdv Hmm yeah I'm building a drawer menu (a la the android hamburger menu). On mobile, I want it to be a overlay (so popover), on desktop it should just move the content to the side. The popover api seemed appropriate because a drawer menu isn't really a dialog and the popover api allows me to keep the same `div` and just switch the popover attribute (instead of having to swap the entire `div` element for a `dialog` )

@rgadellaa hm… thing with <dialog> element is that it comes with a built in role (which would be equivalent to div role=dialog) and with built in behaviours/JS methods (which you can really only get with the <dialog> element), hope that helps

Roderick Gadellaa

@hdv Haha yeah, thanks! I guess I hoped that elements in the top-layer would not inherit `inert` from the tree where the element is declared (or some way to break out of that inheritance).

I'll try using `dialog`, see how that works.