title: how to style html escaped data in Vue 2 or 3
body: <p>I have user-generated data I'm displaying in a Vue app, so the default Vue behavior of html-escaping the data is perfect.  Except, now I'd like users to be able to search that data, and I'd like to highlight the matching text in the search result.  That means I need my <em>own</em> styling to <em>not</em> be escaped, even though all the <em>original</em> data should still be escaped.</p>
  <p>In other words I need to apply my styling <em>after</em> the data has been html-escaped, eg:</p>
  <h4>1. user inputs data:</h4>
  <p><code>some original data that has special characters like &gt; and &lt;</code></p>
  <h4>2. Vue html-escapes this for safe display:</h4>
  <p><code>some original data that has special characters like &amp;gt; and &amp;lt;</code></p>
  <h4>3. dynamically style the search results</h4>
  <p>Eg if user searched for &quot;original data&quot; it becomes:</p>
  <p><code>some &lt;span class=&quot;my-highlight-style&quot;&gt;original data&lt;/span&gt; that has special characters like &amp;gt; and &amp;lt;</code></p>
  <p>Notice how my dynamic styling was <em>not</em> html escaped even though the user input was.</p>
  <p>I could of course just use <code>v-html</code> to bypass the html escape entirely, but then I lose all the safety and benefit of html escaping which I don't want to lose.  Ideally I want to explicitly call Vue's html escape routine, <em>then</em> apply my styling so that it does not get escaped, <em>then</em> finally render all of that unescaped (since I already applied appropriate escaping programmatically).</p>
  <p>Does Vue offer programmatic access to its html escape routine?  (And I'm not talking about <code>$sanitize</code> which strips out special characters entirely, I want to preserve them just like normal Vue templating does).   I could of course write my own escape routine, just wondered if I could leverage Vue's instead.</p>