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?

paupaulaz · Accepted Answer · 2020-05-21 21:21:02Z

45

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

answered May 21, 2020 at 21:21

paupaulaz

9961 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marc Qualie Over a year ago

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

Thiago Silva Ferreira Over a year ago

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

Spedwards Over a year ago

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

Hammerbot · Accepted Answer · 2017-06-30 15:06:08Z

23

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

answered Jun 30, 2017 at 15:06

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

4 Comments

KonstantinVlasov Over a year ago

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

Sarumanatee Over a year ago

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

code4jhon Over a year ago

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

paupaulaz Over a year ago

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

Nixon Kosgei · Accepted Answer · 2021-03-29 08:44:55Z

10

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

answered Mar 29, 2021 at 8:44

Nixon Kosgei

95710 silver badges15 bronze badges

3 Comments

Matthew Weiner Over a year ago

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.

Nixon Kosgei Over a year ago

@Mrweiner can you share the link?

Matthew Weiner Over a year ago

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

code4jhon · Accepted Answer · 2020-04-14 20:29:36Z

7

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

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

edited Apr 14, 2020 at 20:29

answered Dec 2, 2019 at 17:50

code4jhon

6,08410 gold badges44 silver badges63 bronze badges

1 Comment

Ousmane Over a year ago

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

Andrew Pye · Accepted Answer · 2024-11-05 19:35:53Z

1

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

answered Nov 5, 2024 at 19:35

Andrew Pye

6524 silver badges19 bronze badges

Comments

Curial Iglesias · Accepted Answer · 2024-03-15 14:26:26Z

0

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>

answered Mar 15, 2024 at 14:26

Curial Iglesias

11 bronze badge

Collectives™ on Stack Overflow

Vue.js style v-html with scoped css

6 Answers 6

3 Comments

4 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

4 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related