I would like to dynamically update styles inside style tags.
However creating a container model for Vue, removes the style tags.
I know sty
vue-loader (and Vue template compiler Vue.compile(..)) both will filter out any tags that are encountered in the template.
A simple solution to get around this, is to take advantage of Vue's built-in
.foo[data-id="{{ uniqueId }}"] {
color: {{ color }};
}
.foo[data-id="{{ uniqueId }}"] .bar {
text-align: {{ align }}
}
A unique ID (or some other data-attribute) is required to "scope" the styles to just this component.
This is a nice solution as you can use v-for loops to generate the style content if required (which can be reactive to changes in your components data/props/computed props)
[data-id="{{ uniqueId }}"] div.bar[data-div-id="item.id"]::before {
content: "{{ item.content }}";
color: {{ item.color }};
}