I’ve been reading the inert proposal and I’m curious why the design is for the inert attribute to apply to the entire tree of shadow-inclusive descendants.
The dialog element has a similar concept of making the page content inert, but it works differently—it makes the document inert, except for the subtree starting at the dialog.
When you use these two features together, you get something flexible enough to do, over the path from document root to leaf node:
non-inert → inert (inert attribute) inert → non-inert (dialog) inert → non-inert → inert (dialog and an inert attribute, see the example below)
<!DOCTYPE html> <div> This is made inert by the dialog <dialog id="d"> This is non-inert, it's in the dialog <div inert> This subtree is inert because of the attribute </div> </dialog> </div> <script>d.showModal();</script>
It seems dialog and the inert attribute are slightly non-orthogonal in how they affect inert-ness. It will also be necessary to decide how they interact, for example, what happens to a dialog in an inert subtree that’s then shown modally?
This kind of complexity makes me wonder if it would be worth generalizing the attribute a bit so it can turn inert “on” or “off” at any level of the tree. Then dialog is not a special case, just implicitly turns inert off if shown or something like that.