<head> of a page.
What is the most performant way to do this? Vue uses the concept of scoped CSS, which is compiled at build time. It doesn’t allow runtime modification. What I need is the ability to modify, compile and render the CSS at runtime.
However, this entire string gets re-rendered on every single CSS change. This is not performant enough for my use case.
A solution that would render my CSS rules without relying on a single Vue component, so that it’s picked up by Vue’s Virtual DOM and benefits from its performance.
Now that I’m writing this, I think it might be a solution to render a Vue component for every single CSS class, but I’m not sure if that would work. I’m curious to hear other perspectives to this problem.