Re: [csswg-drafts] CSS Toggles Proposal (#6991)

I've been thinking about this proposal a lot (as my CSS nerd brain often does). I'm simultaneously super-excited about it and also concerned that it is not "broad" enough.

### What I Mean

So, what this proposal effectively does is achieve (part of) something that HTML authors have failed to do thus far, at least making it to the browser, which is to natively be able to create "instances" of elements that are data-bound and stateful. This lack of "templating" has, of course, meant that this is been replicated ad nauseam in user land (e.g. React, Vue, Svelte, Angular, you name it).  

On the one hand, CSS is a logical place for this functionality, because the abstraction of classes / selectors from elements means that you can create "instances" of this "toggle state" as an extension of the language. But this type of state is not _necessarily_ presentational or _only_ presentational.

Therefore, I can see a scenario where:

- Some state is moved from React `useState` and other paradigms to CSS Toggle state, which sounds... good at first? except
- This would likely, logically, be quickly hacked upon to provide "native state" to state which has nothing to do with presentation, or not only to do with presentation
- The initial state value of one of these "instances" would likely be specified via the `style` tag in SSR or JS DOM updating, leading an awkward interface where "component state" is now a "styling" concern

Now, of course, the explainer addresses this directly! Saying (under Non Goals):

> It should still be possible to use this feature in tandem with other web languages to represent/display those more complex application states in CSS

I get it. This group is addressing the needs of CSS, and not wanting to expand the scope beyond presentational. I guess what I'm wondering if there has been any discussion / exploration around something like a `state` attribute on HTML, which then acts as the `toggle-root` value. In other words, a more abstracted "state" model for HTML which can be read / changed by a CSS definition, but is also not so tied to CSS. Something that's more future-proof, I guess?

Maybe this just isn't possible at the moment, without the ability to create instances of HTML partials (Something like https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md). So maybe CSS is the only way to put this idea of "state" tied to "instances" in a declarative way. The idea of CSS being stateful (where the value is not a static value in the document) is just somewhat novel, so it feels like it could be more abstracted across the whole HTML/CSS/JS platform. 🤔  But I don't have any good alternative pitches, so I don't know.

### Events and state

The other mild concern I have is that what _causes_ a state change is implicit and not explicit. This seems to be addressed in the explainer under [Other Component Interactions](https://css.oddbird.net/toggles/explainer/#other-component-interactions). I agree that something other than just `click` but being able to specify `mousedown` or `mouseup` etc would be key at some point.

### Some questions

By the way, what happens when a state root "definition" gets redefined by a class that's added after that state value has been "triggered"? Especially if the number of states is now different, or the current state value is no longer valid, according to the toggle-root? Would it always reset? What if the current state value is valid but is in a different "position"? CSS is good for abstracting element definitions in some ways, but the cascade model means that "current state of X element" could be hard to reason about. I searched the explainer for "cascade" or "overrides" and couldn't find anything that addressed this directly.

### Final thoughts

Just to reiterate, I think this is in general a really good idea! It's possible these other state concerns could be ironed out by some future HTML feature that would be 100% compatible with this. I just think it's worth thinking about it in broad (web platform) terms.

-- 
GitHub Notification of comment by matthew-dean
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6991#issuecomment-1107919901 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 24 April 2022 21:15:26 UTC