show-when Web Component Demos

This item starts hidden and appears when the browser supports container query names.

Resize the window or rotate a device to switch between the two matching media queries.

One element appears for print output. The second uses hide-when to disappear when reduced motion is preferred.

This example is visible by default before registration, then follows the edit query parameter.

This inverse example hides when the readonly query parameter is present.

Hash matching updates immediately when the address bar fragment changes.

Browser online and offline events toggle these two states.

This expanded demo checks the browser language list exposed by navigator.languages.

This element appears when either #edit or ?show_all is present.