is it possible to use style objects like JSX?

[leeoniya]

i'd like to do some variant of below and have ivi diff the style object for me and apply only what changed. and maybe auto-optimize for cached style objects by referential consistency.

let style = {color: 'red', background: 'green'};
let tpl = html`<td style=${style}>123</td>`;

or a . variant:

let tpl = html`<td .style=${style}>123</td>`;

use case is something like table column or cell styles that have to be determined on the fly / from user config/localStorage.

i guess alternative would be something like using stylis for runtime css class attr generation. this doesn't quite work well if you allow e.g. coloring cells by their value (and styling the value somehow) where you can end up with like 100 classNames to generate instead of just directly assigning the computed styles to the cell from some calculation.

bonus (a bit more theoretical than real use case currently): the same question for JSX element ...props spreads, in ivi's case it would be spreading attrs or other DOM element props (not component call args).

[localvoid]

Any type of diffing can be implemented with stateful directives https://github.com/localvoid/ivi?tab=readme-ov-file#dynamic-argument-name

[leeoniya]

k, i'll try that.

the ergonomics around having to create a style directive are maybe not very nice for something that isnt so uncommon. this feels like in the realm of vdom lib responsibility (applying and optimizing dom property assignment)