A way to react to Media Queries

[Superpat]

Here's a first idea:

<p data-media-query="{large: `(min-width: ${mySignal.value}px)`}">
  Hello 
    <span data-show="large.value">Large</span>
    <span data-show="!large.value">Small</span>
</p>

This could be combined with a signal watcher to run an expression when the value of the media query changes, though I cant remember if we have an easy way to do that.

[Superpat]

My main use case is toggling the open attribute on <details> and <dialog> elements, but I'm sure people will find other uses.

[Superpat]

This page would probably be useful for whomever attempting an implementation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries

The screen change event might be a good way to do it too: https://developer.mozilla.org/en-US/docs/Web/API/Screen/change_event but it would require a polyfill on firefox and ios.