Using content-visibility: hidden under the v-show directive when the user's browser supports it

[n0099]

Currently v-show="condition" is toggling display: none via inline style="".

https://web.dev/articles/content-visibility#hiding_content_with_content-visibility_hidden

What if you want to keep the content unrendered regardless of whether or not it is on-screen, while leveraging the benefits of cached rendering state? Enter: content-visibility: hidden.

The content-visibility: hidden property gives you all of the same benefits of unrendered content and cached rendering state as content-visibility: auto does off-screen. However, unlike with auto, it does not automatically start to render on-screen.

This gives you more control, allowing you to hide an element's contents and later unhide them quickly.

Compare it to other common ways of hiding element's contents:

• display: none: hides the element and destroys its rendering state. This means unhiding the element is as expensive as rendering a new element with the same contents.
• visibility: hidden: hides the element and keeps its rendering state. This doesn't truly remove the element from the document, as it (and it's subtree) still takes up geometric space on the page and can still be clicked on. It also updates the rendering state any time it is needed even when hidden.

content-visibility: hidden, on the other hand, hides the element while preserving its rendering state, so, if there are any changes that need to happen, they only happen when the element is shown again (i.e. the content-visibility: hidden property is removed).

Some great use cases for content-visibility: hidden are when implementing advanced virtual scrollers, and measuring layout. They're also great for single-page applications (SPA's). Inactive app views can be left in the DOM with content-visibility: hidden applied to prevent their display but maintain their cached state. This makes the view quick to render when it becomes active again.

Note: In an experiment, Facebook engineers observed an up to 250ms improvement in navigation times when going back to previously cached views.

https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility#using_hidden_to_manage_visibility
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment#skips_its_contents
https://drafts.csswg.org/css-contain/#skips-its-contents

https://css-tricks.com/almanac/properties/c/content-visibility/#aa-content-visibility-hidden
https://caniuse.com/css-content-visibility

[jods4]

This generally sounds like an improvement, but compatibility needs to be carefully considered, as it would be a breaking change.

For example, dom.getBoundingClientRect() returns zeros with display: none, but the last known size for content-visibility: hidden.

Not only is it a breaking change when upgrading Vue, but as not all browsers support this (Safari and Firefox currently do not), it would also be a breaking change when switching browsers.

Right now I think the only safe way to expose this would be a new directive, maybe v-visible? Note that you can easily create this in your project, even though it'd be nice to have it built-in.

An alternative would be a modifier but that is not concise syntax for such a common feature: v-show.content (content-visibility: hidden), v-show.detect (display: none or content-visibility: hidden depending on browser?).

[n0099]

+1 for introducing a new modifier on the existing v-show since v-visible may conflict with user defined directive: [search] [package]

[jods4]

In hindsight, it's unfortunate the built-in directives share the same naming convention as the user ones. Such conflicts are pretty much bound to happen for any new generally useful directive in the future :(