demo · v132
Why interactivity: inert exists when the inert attribute is already a thing
Both turn an element off. But one is HTML, the other is CSS — and that single difference means very different things for media queries, shadow DOM, and animations. Side-by-side table below.
| question | inert attribute | interactivity: inert |
|---|---|---|
| Can I toggle it under a media query? | no | yes — pure CSS |
| Can it animate or transition? | no — it's an attribute, not a property | yes — transition: interactivity |
Can I scope it through ::part() or ::slotted()? | no | yes — CSS selectors apply |
| Cascades inheritance from ancestors? | propagates to subtree, not inherited via CSS rules | yes — full CSS inheritance |
| Works for non-HTML elements (SVG)? | HTML-only attribute | yes — CSS applies anywhere |
| Removes from accessibility tree? | yes | yes |
| Pointer events blocked? | yes | yes |
| Sequential focus skipped? | yes | yes |
| Can I select the text? | no | no |
attribute approach
Old way. Toggle the attribute via JS or server render. No CSS hook.
CSS property approach
New in Chrome 132. Toggle via media query, class, animation, anything.
/* the media query trick — impossible with the attribute */
@media (prefers-reduced-motion: reduce) {
.carousel-decoration { interactivity: inert; }
}
/* the transition trick */
.modal[hidden] .content {
interactivity: inert;
transition: interactivity 250ms;
}