inert — отключение целой области интерфейса без обхода дочерних элементов!

Иногда часть интерфейса требуется временно исключить из взаимодействия: например, при открытии выдвижной панели или на время операции, когда фоновый интерфейс не должен принимать пользовательский ввод.

Управлять состоянием каждого элемента отдельно можно, но такой подход требует учитывать разные типы элементов и механизмы взаимодействия:
button.disabled = true;
input.disabled = true;
link.tabIndex = -1;

disabled применим не ко всем HTML-элементам, а изменение tabindex решает только задачу фокуса. Для блокировки целой области документа существует глобальный атрибут inert:

Сохранить
Профиль



Состоянием можно управлять через HTMLElement.inert, без поиска и изменения каждого интерактивного элемента внутри контейнера:
const content = document.querySelector('#content');

content.inert = true;

После установки inert контейнер и его потомки в плоском дереве (flat tree) не могут получать фокус. Это относится и к программному вызову focus():
content.inert = true;

document.querySelector('#content input').focus();

Пользовательская активация также блокируется: клик пользователя по кнопке внутри inert-области не приводит к click на этой кнопке. Программный element.click() при этом следует рассматривать отдельно:
const button = document.querySelector('#content button');

button.addEventListener('click', () => {
console.log('click');
});

content.inert = true;

В отличие от inert, pointer-events: none влияет на определение элемента под указателем, но сам по себе не исключает элементы из последовательной навигации с клавиатуры:
.content {
pointer-events: none;
}

inert действует шире: элементы не получают фокус, пользовательское взаимодействие блокируется, а содержимое исключается из дерева доступности.

Например, основной интерфейс можно деактивировать при открытии выдвижной панели, расположенной вне inert-контейнера:








Состояние всего фонового интерфейса переключается одной операцией независимо от количества элементов внутри main:
function openDrawer() {
content.inert = true;
drawer.hidden = false;
}

function closeDrawer() {
content.inert = false;
drawer.hidden = true;
}

Для модальных интерфейсов есть . Вызов showModal() помещает диалог в верхний слой (top layer), а остальную часть документа браузер делает inert автоматически:
const dialog = document.querySelector('dialog');

dialog.showModal();

Сам inert не задаёт визуальное состояние заблокированной области. При необходимости оно оформляется отдельно через CSS:
[inert] {
opacity: 0.6;
}

🔥 inert позволяет исключить целую область документа из взаимодействия без ручного управления disabled, tabindex и состоянием каждого вложенного элемента.

📣 Code Ready | #практика