I am trying to figure the difference between inert and disabled html attribute , apart from the specific nature of the disabled attribute that only specific element can use it. Does it mean inert is a kind of disabled that works on all element?
<div inert>
<button>This is a button</button>
<input type="text">
<input type="button" value="This is an input">
</div>
<div>
<button disabled>This is a button</button>
<input type="text" disabled>
<input type="button" value="This is an input" disabled>
</div>
<div>
<button>This is a button</button>
<input type="text">
<input type="button" value="This is an input">
</div>
disabled and inert have completely different purposes. disabled is an actual attribute, while inert is merely a definition of the concept it describes.
The purpose of using disabled is to keep a user from interacting with and submitting the value of an input element and is supported solely on such elements.
On the other hand, inert can be used on any element and it's used to instruct the user agent to act as if the marked node were absent for the purposes of targeting user interaction events.
Here is what the HTML standard says about 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.
In addition, the standard has the following two notes regarding inert:
When a node is inert, it generally cannot be focused. Inert nodes that are commands will also get disabled.
This section does not define or create any content attribute named "inert". This section merely defines an abstract concept of inertness.