Version

3.0.11

Reproduction link

Vue SFC playground link

Steps to reproduce

1. Add following in scoped css:

.test span {
    background: yellow;
}

2. Append a span with JS to an element with the test class

The span is not selected (no yellow background)

What is expected?

Yellow background on the added span

css like:

.test[data-v-f13b4d11] span {
    background: yellow;
}

What is actually happening?

No yellow background on the added span

.test span[data-v-f13b4d11] {
    background: yellow;
}

I ran into this issue while using pdfjs to render a text layer, where i try to style all span elements inside an element with a text-layer class. (pdfjs adds creates a ton of span elements inside the element you give it)

Putting the data tag on the class as shown in my expected solves this, however, I can see how this could cause a similar issue the other way around, if you where to manually add an element with test class

This is as expected you should:

<style scoped>
  .test ::v-deep(span) {
    background: yellow;
  }
</style>

scoped style does not work with manually created DOM elements, if you cannot avoid this situation, then you can use the workaround given by @edison1105 .