CODEWITHSUNDEEP
cssvue.jsvue-componentcss-modules
Tallboy
Tallboy

Reputation: 13417

Style v-html Vue 3

For some reason this is working in Vue 3 which says is deprecated in every other SO answer:

.description >>> p {
  color: red;
  margin-bottom: 1rem;
}

But I've tried all the permutations of ::v-deep and can't seem to make it work:

::v-deep .description {
  p {
    color: red;
    margin-bottom: 1rem;
  }
}

.description {
  ::v-deep p {
    margin-bottom: 1rem;
  }
}

How would I do this with "vanilla" Vue 3?

<div class="description text-sm">
  <div v-html="item.description"></div>
</div>

What I would like to work:

<style scoped>
.description p {
  margin-bottom: 1rem;
}
</style>

Upvotes: 2

Views: 3479

Answers (3)

Curial Iglesias
Curial Iglesias

Reputation: 1

Use :deep {}

In your case you should do:

<template>
   <div class="description" v-html="item.description"></div>
</template>

<style scoped>
.description {
   :deep {
      p {
         margin-bottom: 1rem;
      }
   }
}
</style>

Upvotes: 0

Tallboy
Tallboy

Reputation: 13417

The answer is obvious in retrospect after looking at the example on vue-loader

The problem was that I thought nesting was required, or that it had to preceed the target selector.

In actuality, its identical to this:

.description >>> p {
    margin: 1rem 0;
}

...except that >>> is replaced with ::v-deep, which requires removing the space because it's a pseudo-class, just like regular css

This will work:

.description::v-deep p {
    margin: 1rem 0;
}

Upvotes: 5

Peter Pointer
Peter Pointer

Reputation: 4162

You can make a component's style scoped with the scoped attribute.
All selectors will be prefixed automatically so that the style only applies to this component. It is not clear from your example code if you have that, so let's give the example:

<style lang="scss" scoped>
.description {
  p {
    color: red;
    margin-bottom: 1rem;
  }
}
</style>

Is ::v-deep still needed this way? v-deep doesn't make it more scoped.
Can you check in the resulting CSS what that compiles to?

Can you create a full snippet with your code to test here?

Upvotes: 0

Related Questions