IE を除くモダンブラウザで使用可能です。

• https://caniuse.com/?search=inert

「inert」は「不活性な」という意味を持ちます。inert 属性を指定した要素およびその子孫要素を不活性化します。不活性化された要素は表示はそのままですが下記などがすべて無効化されます。検索対象からも除外されると説明されているサイトもありますが、inert を指定しても検索の対象にはなるようです。

• 編集不可となる。(HTML属性の contenteditable="false" と同等)
• フォーカスが移動しなくなる。(HTML属性の tabindex="-1" と同等)
• クリックやドラッグが無効化される。(CSS の pointer-events: nonde と同等)
• 選択できなくなる。(CSS の user-select: none と同等)
• 音声ブラウザで読み上げされなくなる。(HTML属性の aria-hidden="true" と同等)

下記の様に使用します。

<div inert>
  <!-- 不活性なコンテンツ -->
</div>

JavaScript を用いて制御するには次のようにします。

document.getElementById(id).inert = true;

使用例としては自作のダイアログや popover="manual" のダイアログを表示した際に、ダイアログ以外のコンテンツを不活性にして入力を受け付けないようにする際に役立ちます。下記の例では、ダイアログが開いている間 <input type="text"> などの部品が入力を受け付けなくなります。

<style>
*::backdrop {
  background-color: rgba(0, 0, 0, 0.1);
}
*:popover-open {
  padding: 1rem;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 10px 0px #999;
  text-align: center;
}
</style>

<div id="main">
 <button id="btn-show">OK</button>
 <input type="text">
</div>

<dialog id="dlg" popover="manual">
 This is a sample dialog.<br><br>
 <button id="btn-hide">OK</button>
</dialog>

<script>
document.getElementById("btn-show").addEventListener("click", () => {
  document.getElementById("main").inert = true;
  document.getElementById("dlg").showPopover();
});
document.getElementById("btn-hide").addEventListener("click", () => {
  document.getElementById("main").inert = false;
  document.getElementById("dlg").hidePopover();
});
</script>

上記の他にも下記のようなケースの代用として役立ちます。

• 一部の文章を読み上げたくない。
• 一部のコンテンツのキーボードフォーカスを無効化したい。
• 一部のコンテンツのクリックを無効化したい。
• 一部のコンテンツを選択できないようにしたい。
• サブミットボタンを押してレスポンスが返ってくるまでの間はすべての操作を無効にして二重送信を防ぎたい。
• スライダーやカルーセルなどで画面上からはみ出しているコンテンツを不活性化したい。

親要素に inert=true を指定すると子孫要素に inert=false を指定しても部分的に不活性を解除することはできないので注意してください。

<div id="parent">
 <input type="text">
 <div id="child"><input type="text"></div>
</div>

<script>
document.getElementById("parent").inert = true;
document.getElementById("child").inert = false;   // 一部の子孫要素のみを不活性解除することはできない
</script>