title: Vuetify - CSS not working (taking effect) inside component
body: <p><strong>Case 1</strong><br>
  We are trying to apply custom a style to a rendered vuetify element:  </p>
  
  <pre><code>&lt;template&gt;
      &lt;v-text-field v-model="name" label="Name" /&gt;
  &lt;/template&gt;
  
  &lt;style scoped&gt;
  .input-group__input {
      background: red;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>But there are no changes.
  <hr>
  <strong>Case 2</strong><br>
  We are trying to style elements rendered by <code>v-html</code> (e.g. external html). For example, we try to apply custom width and height on the <code>img</code>, but it doesn't work:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div v-html="customHTML"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data: () =&gt; ({
          customHTML: `&lt;img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg"&gt;`;
      })
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  img {
      width: 200px;
      height: 200px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>How to apply custom CSS to those elements?</p>