Relation to content-visibility: hidden

[chrishtr]

One of the use cases listed in the explainer is Temporarily offscreen/hidden content. Is this use case already handled by content-visibility: hidden? content-visibility: hidden disables hit testing, focus, tab order, etc and also likely has better performance than any existing mechanism, or the proposed inert attribute.

[alice]

Doesn't that cause the layout objects to be destroyed?

[chrishtr]

No. content-visibility: hidden preserves the layout objects (or more precisely, defines the elements to still have layout boxes. It's technically up to the UA whether to cache the layout objects). In this respect it's like visibility: hidden.

For this reason, content-visibility: hidden is my recommended best practice for hiding DOM that is not part of the current view but might be in the future, for use cases such as caching SPA navigation routes and temporarily hidden drawer widgets. I also recommend it for layout measurement of offscreen content.

[alice]

Ok, what does this mean for inert?

[chrishtr]

I think the other use case - On-screen but non-interactive content is still unmet, and would be a use case of the inert keyword.

[bkardell]

For this reason, content-visibility: hidden is my recommended best practice for hiding DOM that is not part of the current view but might be in the future, for use cases such as caching SPA navigation routes and temporarily hidden drawer widgets

I'm having trouble imagining solving some of the desires in the explainer like this, but that's probably just failure of imagination on my part since you specifically even mention drawers here... Any chance you could share implementations of some of these so that we could look/compare?

[chrishtr]

Any chance you could share implementations of some of these so that we could look/compare?

I don't have a specific implementation fo a drawer using content-visibility:hidden on hand to point to. But the implementation would be something like:

drawer[closed] {
  width: 0;
  height: 0;
  content-visibility: hidden;
}
<drawer closed>
 contents
</drawer>