With Chrome 102 HTMLElement.inert attribute is now active, it is also in the Firefox/Edge/Safari nightlies, so will hopefully become available for those soon.

This inert attribute aims to make interactive HTML inert as a rock.
Yes, it only took 32 years to disable interactivity like in HTML 1.0, hurrah!

To quote MDN:

The HTMLElement property inert is a boolean value that, when present, makes the browser “ignore” user input events for the element, including focus events and events from assistive technologies.

So it is like good old Enabled from the VCL. And this is a great addition to HTML!

Why is this little attribute so great ? Well because it eliminates in one fell swoop a whole lot of complexity.

For your own components, before inert you had to either

• implement an Enabled property ersatz, and then check it in every single input event you were handling
• unbind every single input event, then bind it again, and if you had dynamic DOM elements, well good luck

For third party components, before inert you had to either

• look for what served as Enabled ersatz in that component, if there was anything (hahaha!)
• deal with bugs of the component’s Enabled
• deal with the bugs of the component’s plugins, or the complete lake of support for the Enabled ersatz
• resort to unbinding everything yourself (like the inert polyfill attempts to), and likely fail miserably, because binding of events is not the observable mutation you want to be looking for

For modals, before inert you had to

• cover everything else with a huge div to capture those mouse and pointer events
• be water-tight on modal focus loss (with the side effects when the modal loses focus)
• pray that nothing would bypasse your div, because JavaScript-triggered events would ignore it entirely, as would test frameworks like Selenium and all its derivatives and extended family

Personally this attribute came just at the right time as I was implementation a leafletjs based map. Leafletjs is a cool little maps library, but where disabling was really not a design consideration. And for its plugins, it was not even on the radar…

For further reading see Introducing inert on the Chorme dev blog.