You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
It would be useful to receive an event when an element's matches(selector) changes, similar to how you can do so with matchMedia.
The ability to reactively change styles based on selector changes in CSS is a powerful feature we do not have in the DOM. Instead to achieve similar reactivity we need to account for the variety of ways in which state may change that includes things like:
User events
Network events (fetch(), web sockets, SSE)
Cross-frame / cross-window message events
And probably a lot more.
Use-case
You want to mark a submit button as disabled when the form is invalid. You might naively write this code:
This works pretty well, but if the requirements change and say you do something like:
Clear an input if server-side validation fails via an asynchronous fetch request.
Clear an input if the form times out (5 minute timeout).
These things will not trigger an input so the submit button might be incorrectly enabled. Here's an example codepen that demonstrates this problem: https://codepen.io/matthewp/pen/MWZpBYd
Proposal 1
This is inspired by matchMedia, Element.prototype.match:
I prefer proposal 1, but there might be issues with it and I'm not sure if this style API is still in style. I defer to the experts here. My second proposal would follow the observer pattern:
This would be super handy. Especially for subscribing to the open/close state of popovers.
Unlike with dialogs where you can just subscribe to the open property via a Mutation Observer), with popovers you are limited to checking for the :popover-open pseudo class.
It would be useful to receive an event when an element's
matches(selector)
changes, similar to how you can do so withmatchMedia
.The ability to reactively change styles based on selector changes in CSS is a powerful feature we do not have in the DOM. Instead to achieve similar reactivity we need to account for the variety of ways in which state may change that includes things like:
message
eventsAnd probably a lot more.
Use-case
You want to mark a submit button as disabled when the form is invalid. You might naively write this code:
This works pretty well, but if the requirements change and say you do something like:
These things will not trigger an
input
so the submit button might be incorrectly enabled. Here's an example codepen that demonstrates this problem: https://codepen.io/matthewp/pen/MWZpBYdProposal 1
This is inspired by
matchMedia
, Element.prototype.match:Proposal 2
I prefer proposal 1, but there might be issues with it and I'm not sure if this style API is still in style. I defer to the experts here. My second proposal would follow the observer pattern:
The text was updated successfully, but these errors were encountered: