title: Vue 2 - Styling HTML returned in a switch statement
body: <p>I'm building a generic component supposed to receive various backend data. I wrote a switch. One condition is :</p>
  <pre><code>case 'Bases':
                  let bases = variant[tableName][colValue].map((base) =&gt; {
                      return `&lt;div class=&quot;base b${base.strongestIndication}&quot;&gt;${base.name}&lt;/div&gt;`
                  })
                  return bases.join('')
  </code></pre>
  <p>I use v-html in my template, therefore in this case, we have 3 divs created, each with a class of &quot;base&quot; and then &quot;b1&quot;, &quot;b2&quot;, &quot;b3&quot;. I can see on the webpage that these classes are properly set when I inspect the elements.</p>
  <p>I've described in my style some rules for theses classes (mostly background-color, border-radius and so on), but they do not apply.</p>
  <p>I'm guessing this might have something to do with the CSS being applied before these divs are created but I'm not sure of this.</p>
  <p>What should I do to get these tags created by JS to be styled properly ?</p>
  <p>(Also, I know using v-html can be dangerous, therefore if you have a better idea for this whole thing, I'm all ears)</p>