[Proposal] Shorthand for setting classes and inline styles using argments

[rosyatrandom]

Simply because setting conditional classes and individual inline styles are both slightly annoying, I propose a completely unnecessary shorthand:

// Existing (note -- I am going to disregard kebab/camel casing in the examples
<AnyElement style="some-prop: some-val:" />
<AnyElement :style="{ 'some-prop': some-val }" />

// Proposed
<AnyElement style:some-prop="some-val" />

// Existing 
<AnyElement :class="{ 'some-class': some-predicate: }" />

// Proposed
<AnyElement class:some-class="some-predicate" />

You're asking 'BUT WHY?'

The answer is purely: I just prefer it slightly. Sorry.

And if we were to take this all seriously, for some reason, a shorthand for class:foo and style:bar would be nice. Looking at readily available symbols, let's just say ^foo and $bar for the example:

<AnyElement $some-prop="some-val"  ^some-class="some-predicate"/>

[aniruddhaadak80]

Hey @rosyatrandom,

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!