inert attribute

简单理解，一个dom元素被加了 inert 属性后，就丧失了活力，变得不可交互

The inert attribute allows web authors to mark parts of the DOM tree as inert. When a node is inert:

- Hit-testing must act as if the 'pointer-events' CSS property were set to 'none'.

- Text selection functionality must act as if the 'user-select' CSS property were set to 'none'.

- If it is editable, the node behaves as if it were non-editable.

- The user agent may ignore the node for the purposes of find-in-page.

约等于

[inert] {
  pointer-events: none;
  cursor: default;
}

[inert], [inert] * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

但是有些还是需要浏览器去实现的，比如第4点的 find-in-page，如果一个元素被inert了，那它的内容就不能被 Ctrl+F 搜索到，window.find(text)也需要跳过

可以升级到Chrome101后去体验一下 demo

那有什么场景可以用到呢？举一个例子

swiper

假设在一个左右切换卡片的场景，左右的卡片还没有被滑动到中间，但是又露出了一点内容，刚好这露出的部分有一个按钮，通常情况下，在没有滑动到中间的时候，这部分内容应该是不允许产生点击交互的。那就可以通过给非active的卡片添加 inert

inert attribute

公告