<div id='app'>{{ userContent }}</div>
In userContent, if a line starts with - I want to style only that line red. I can modify userContent data in js with the class for those lines and use v-html but then I lose XSS protection. Is there any way to have XSS protection with Vue.js but also be able to style the userContent?
I dont think this is possible without creating new elements from the user provided string.
You could parse the string yourself using a regular expression to match the lines starting with a hyphen, something like (?<=\-)(.*?)(?=\n) or \-(.*?)\n, wrap that content in a new element with a class, and then style it, but you would then need to inject that back into the html, which I believe would then open you up to XSS, same as with v-html.
To my knowledge and after a quick search there doesnt seem to be any way to do this purely with CSS.