My understanding of Ractive updates is that, more or less, it checks what parts of data have changed, compares that to what parts of HTML need to be updated, and just updates or overwrites that.
In the case of CSS, if a Ractive template inserts an inline stylesheet, does it have the same kind of partial updates with individual style blocks? (Like a selector plus one block of properties/values.) Such that a change of data would only update a single style rather than an entire <style> stylesheet.
(I ask because I'm assuming the latter scenario would be more performant as far as repaints, but if someone knows otherwise, I'd love to know that as well.)
If Ractive doesn't natively do this behaviour, is there a way to "shim" Ractive to treat individual styles as distinct virtual nodes?
Yes, it maintains a single node – otherwise the parser would need to understand CSS, and at runtime Ractive would need to traverse and manipulate the stylesheet object. The good news is that the entire block is updated at once, so it doesn't update the CSSOM multiple times if there are multiple changes.
If it turns out that this approach does have an adverse performance impact, please raise an issue on GitHub!