The inert attribute is still into draft and no browser currently support it. The current draft currently states:

A node (in particular elements and text nodes) can be marked as inert. When a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as “find in page”), and may prevent the user from selecting text in that node.

Inert subtrees - HTML- Living Standard — Last Updated 20 August 2018

inert allow us to prevent access to subtrees, so we do not activate now visible DOM elements such as form elements, links, buttons etc. It helps us as well to tell assistive technology, such as screen readers, to not read inert sections of your application.

Example

In this example, I use Inert Polyfill from WICG.

Using this polyfill we can set a DOM element as inert by adding the inert attribute:

<div inert>
  <a href="#">inert link</a>
  <!--  -->
</nav>

To remove the inert attribute with js we use:

el.inert = false;

To add the inert attribute with js we use:

el.inert = true;

Inert DOM elements have a red background in the following example.

See the Pen Inert Polyfill by Vincent Humeau (@vinceumo) on CodePen.

Resources