Great question! Let's dive into the key differences between these two attributes, beyond the fact that disabled only works on specific elements.

Core Functional Differences #

• Scope of Effect

  • disabled only affects the single element it's applied to. If you have a container with multiple interactive elements, you need to add disabled to each one individually (like your second code example).
  • inert acts on the entire subtree of the element it's attached to. Applying it to a <div> (as in your first example) disables all interactive elements inside it—buttons, inputs, links, even text selection and focus navigation—all in one go.

• Level of Interaction Blocking

  • disabled primarily prevents the element from being activated (e.g., clicking a button, typing in an input) and removes it from focus navigation (Tab won't select it). But other interactions like text selection outside the disabled element in the same container still work.
  • inert goes further: it makes the entire element and its children non-interactive in every way. Users can't click, focus, select text, or even hover over elements in the inert subtree. Screen readers also treat inert content as non-focusable, which helps with accessibility.

• Semantics and Default Styling

  • disabled has built-in semantic meaning for form elements, and browsers apply default grayed-out styles to visually indicate the element is inactive.
  • inert doesn't come with default styling—you'll need to add your own CSS (like opacity: 0.5;) to signal to users that the area is non-interactive. It's more about blocking interaction than conveying form-specific disabled state.

• Browser Support

  • disabled is a long-standing attribute with universal browser support, dating back to early HTML versions.
  • inert is a relatively newer addition (part of the HTML Standard since 2022) and is supported in all modern browsers, but you might need polyfills for older ones like IE or legacy Edge.

Is inert a "Universal disabled"? #

In a way, yes—since it can be applied to any element (not just form controls) to make it non-interactive. But it's more than just a generalized disabled: it's designed to disable entire sections of the UI, not just individual elements. If you need to disable a single button, disabled is still the right choice (it's more semantically appropriate for form elements). If you need to turn off an entire panel or modal that contains multiple interactive elements, inert is far more efficient.

Your Code Example Breakdown #

Let's walk through your snippets to see this in action:

<!-- All elements inside this div are completely non-interactive -->
<div inert> 
  <button>This is a button</button> 
  <input type="text"> 
  <input type="button" value="This is an input"> 
</div>

<!-- Each interactive element is disabled individually; non-form elements here would still work -->
<div> 
  <button disabled>This is a button</button> 
  <input type="text" disabled> 
  <input type="button" value="This is an input" disabled> 
</div>

<!-- All elements are fully interactive -->
<div> 
  <button>This is a button</button> 
  <input type="text"> 
  <input type="button" value="This is an input"> 
</div>

内容的提问来源于stack exchange，提问作者oluwasetemi