Vue.js style v-html with scoped css

Question

How can I style v-html content with scoped css using vue-loader?

Simple example: component.vue

<template>
  <div class="icon" v-html="icon"></icon>
</template>
<script>
  export default {
    data () {
      return {icon: '<svg>...</svg>'}
    }
  }
</script>
<style scoped>
  .icon svg {
    fill: red;
  }
</style>

generate html <div data-v-9b8ff292="" class="icon"><svg>...</svg></div>

generate css .info svg[data-v-9b8ff292] { fill: red; }

As you can see v-html content don't have data-v attribute, but generate css have data-v attribute for svg.

I know this is expected behavior for vue-loader (https://github.com/vuejs/vue-loader/issues/359). And in this issue descendent selectors mentioned. But as you can see I use it in my css and it's not worked.

How can I style v-html content?

Kakapo

Answer 1

As stated in my answer here:

New version of vue-loader (from version 12.2.0) allows you to use "deep scoped" css. You need to use it that way:

<style scoped> now support "deep" selectors that can affect child components using the >>> combinator:

.foo >>> .bar { color: red; } will be compiled into:

.foo[data-v-xxxxxxx] .bar { color: red; }

More informations on the release page of vue-loader

Muscarine

Awesome, thanks! It's definitely should be mentioned in the docs. – Kakapo

Adding because it happened to me, if the above doesn't work, .foo /deep/ .bar might work instead. – Copacetic

The above comments needs to be it's own answer, I was struggling with this until I read the comment. – Autoionization

This doesn't work for me with vue-loader 15.9.1. Anyone having the same issue ? – Postpaid

Answer 2

I am using vue-loader 15.9.1. The >>> solution did not work for me (no effect) whereas the /deep/method resulted in building errors...

Here is what worked instead:

.foo ::v-deep .bar { color: red; }

Postpaid

None of the other answers worked, but this was perfect! – Norward

Thank you so much! Only your answer helped – Lyle

Thank you! Just add let more context, here is the documentation link about it: vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors – Stowe

::v-deep is now deprecated. You should switch to :deep(.bar) instead. – Jimenez

Answer 3

Using /deep/ selector with SCSS didn't work for me but then I tried using ::v-deep selector

e.g

::v-deep a {
  color: red;
}

See this answer

Veinlet

There's an SFC to change this to :deep(a). Getting a warning [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. – Varnado

@Varnado can you share the link? – Veinlet

Looks like this is the one github.com/vuejs/rfcs/blob/master/active-rfcs/… – Varnado

Answer 4

AS Sarumanatee said if the accepted answer doesn't work try:

.foo /deep/ .bar { color: red; }

Autoionization

This one worked for me, "::v-deep" also. I don't know which is best ? – Margy

Answer 5

Use :deep {}

In your case you should do:

<template>
   <div class="icon" v-html="icon"></div>
</template>

<style scoped>
.icon {
   :deep {
      svg {
         fill: red;
      }
   }
}
</style>

Socman