How the HTML inert Attribute Disables Interaction and Improves UI

The inert attribute is a Boolean property on an HTMLElement that, when present, tells the browser to ignore user interaction events such as focus, click, and keyboard input for that element and its descendants. It also prevents the element’s content from being searchable or selectable, which can be useful when building user interfaces.

<div inert>
  <p>can't select</p>
  <label>
    <input placeholder="can't edit"/>
  </label>
  <button onclick="alert('button')" type="button">can't click</button>
</div>

Most modern browsers already support the inert attribute. For browsers that do not, the WICG provides a polyfill (https://github.com/WICG/inert) so developers can use the feature consistently.