We have content that a user creates using a text editor, which creates HTML tags for them such as h1 p etc etc.

We also let the user define a theme via a predefined form that basically sets style objects for these tags.

In Vue, you could easily add these as <h1 :style="headingTheme"></h1> attributes, but
only if Vue was creating these tags.

However, this HTML is dynamically injected to the component as a string.

At the moment, we have to create a class in the <style> tag which binds each property individually to the theme object, like this..

<style lang="scss" scoped>

 .my_parent_class:deep(h1) {
   color: v-bind('headingTheme.color');
   font-family: v-bind('headingTheme.fontFamily');
   ... more properties here ....
 } 
    
</style>

But we have to remember to update this each time we make a change to the theme options.

Is there a way to dynamically build this css style and apply it to the Vue component?

Could use new CSSStyleSheet(), and make a sheet on the fly, but its a lot of faff.

I was wondering if there was another Vue way?

Something like the :style="themeStyle" binding, but some how cascade to any child nodes not managed by Vue!!