Comment by extra88
Your original message was "Inert should be used instead of overflow" which is incorrect because `inert` doesn't affect scrolling of the viewport. Your CSS rule example is a good way to demonstrate using the presence of an `inert` attribute on the body to determine when `overflow: hidden` should be applied to the body.
That section of the MDN article is somewhat confusing but if the dialog is opened using the `.showModal()` method, there's no need to add an `inert` attribute yourself, the browser automatically makes the rest of the page inert.
If a <dialog> that's meant to be modal is opened not using `.showModal()`, say by making it a `popover` and the `popovertarget` of a button, then you might set `inert` yourself (and remove it when the <dialog> is closed). However, you can't simply do <body inert> if that <dialog> is inside the <body> because then the dialog itself would be inert.
I was on mobile. I apologize my comment was insufficient