# What even is this?

A demo/test page for an experimental `inert` prollyfill. See the readme for the `inert` github project for more information.

## The container below is marked declaratively in the source with the `inert` attribute

By adding the `inert` attribute to any element you make the elements inside it unfocusable (by mouse, pointer events or keyboard tabbing. You shouldn't be able to click this or set focus to it because it is inside a container that is inert.

This checkbox is inside the inert container too This field is inside the inert container too

## The container below can be toggled inert on and off

Clicking the checkbox above will toggle the element's `inert` property via

    element.inert = evt.target.checked == true;

You shouldn't be able to click this or set focus to it..

### This inner section is marked inert

Toggling the outer inert should not make this link become clickable.

## The container below contains nested `inert` containers. The inner one can be toggled on and off

Clicking the checkbox above will toggle the element's `inert` property via

    element.inert = evt.target.checked == true;

You shouldn't be able to click this or set focus to it..

### This inner section is not marked inert

Toggling the inner inert should not make this link become clickable.

## The container below contains nested containers. The inner one starts non-inert and can be toggled on and off Toggling the outer inert after toggling the inner inert should not modify its state either.

Clicking the checkbox above will toggle the element's `inert` property via

    element.inert = evt.target.checked == true;

You shouldn't be able to click this or set focus to it..

### This inner section is not marked inert

Toggling the inner inert should not make this link become clickable or tabbable.

Toggling the inner inert should not make this fake link become tabbable or clickable either.