Style v-html Vue 3

Question

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>

Answer 1

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