CODEWITHSUNDEEP
vue.jsvue-loader
KonstantinVlasov
KonstantinVlasov

Reputation: 303

Vue.js style v-html with scoped css

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?

Upvotes: 30

Views: 22915

Answers (6)

Andrew Pye
Andrew Pye

Reputation: 622

Update for 2024, I had to do the following to get my styling to apply to an a-tag.

.my-content-with-link {
    :deep(a) {
        color: red;
    }

Upvotes: 0

Curial Iglesias
Curial Iglesias

Reputation: 1

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>

Upvotes: 0

Nixon Kosgei
Nixon Kosgei

Reputation: 937

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

Upvotes: 8

paupaulaz
paupaulaz

Reputation: 977

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; }

Upvotes: 43

code4jhon
code4jhon

Reputation: 6034

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

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

Upvotes: 7

Hammerbot
Hammerbot

Reputation: 16324

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

Upvotes: 22

Related Questions