title: Vue.js style v-html with scoped css
body: <p>How can I style v-html content with scoped css using vue-loader?</p>
  
  <p>Simple example:
  component.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="icon" v-html="icon"&gt;&lt;/icon&gt;
  &lt;/template&gt;
  &lt;script&gt;
    export default {
      data () {
        return {icon: '&lt;svg&gt;...&lt;/svg&gt;'}
      }
    }
  &lt;/script&gt;
  &lt;style scoped&gt;
    .icon svg {
      fill: red;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>generate html
  <code>&lt;div data-v-9b8ff292="" class="icon"&gt;&lt;svg&gt;...&lt;/svg&gt;&lt;/div&gt;</code></p>
  
  <p>generate css
  <code>.info svg[data-v-9b8ff292] { fill: red; }</code></p>
  
  <p>As you can see v-html content don't have data-v attribute, but generate css have data-v attribute for svg.</p>
  
  <p>I know this is expected behavior for vue-loader (<a href="https://github.com/vuejs/vue-loader/issues/359" rel="noreferrer">https://github.com/vuejs/vue-loader/issues/359</a>). And in this issue descendent selectors mentioned. But as you can see I use it in my css and it's not worked.</p>
  
  <p>How can I style v-html content?</p>