Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNqNkMtuwyAQRX9lxCZS1UAfO9eyVPU32LjOpHVkYMTgVlXkf+8AeXiRRVZwz1yGmXtU70T6Z0bVqJaHOFICxjRTZ/3oKMQEH8ER7GNwsNEmi2zfWN+a6heniISOpj6hKICWqfflBm15bio2J96alV0kp78JgYdAuCvlAjr1qOoMW9eTPnDwMuUxd7KnAlvVQCGZyVxZW/WdEnFjDO+HPOyBdYhfRm46zj6NDjWy237G8MsYpbFVucVi/SJfnle8kch9K8NTPSp6vmx9ZS832OuK3RtUdkEHDzWCIUwhNhBx9yabrGJc/gHz76TF

Steps to reproduce

the scoped style is not fully scoped. it will affect outside components.

<script setup lang="ts">
</script>

<template>
  <span>
   0
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </span>
</template>

<style scoped lang="scss">
span {
  > * {
    color: red;
  }
}
</style>

What is expected?

html

<span data-v-3f3fa145>
  <span data-v-7e0cd5da>
    0
    <span data-v-7e0cd5da>1</span>
    <span data-v-7e0cd5da>2</span>
    <span data-v-7e0cd5da>3</span>
  </span>
</span>

css

span[data-v-7e0cd5da] > *[data-v-7e0cd5da] {
  color: red
}

0 should be black

What is actually happening?

<span data-v-3f3fa145>
  <span data-v-7e0cd5da>
    <span data-v-7e0cd5da>1</span>
    <span data-v-7e0cd5da>2</span>
    <span data-v-7e0cd5da>3</span>
  </div>
</span>

css

span > *[data-v-7e0cd5da] {
  color: red
}

0 is red

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
    Memory: 42.86 GB / 63.88 GB
  Binaries:
    Node: 18.3.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.37)
    Internet Explorer: 11.0.22000.120

Any additional comments?

No response

This is expected. Its in general a very bad idea to use element selectors like this in scoped css.

It's just an example of using span to demonstrate. in practice, it will conflict with other classes out scope. I don't think it's a bad idea to use class with advanced selector as it is the standard of css.

but in practice, when using class selectors, this is not a real issue. This is the only problematic scenario:

<div class="upper-class">
  <div class="inner-class">this should be red</div>
</div>
<div class="inner-class">
  This can turn out red if `outer-class` is also used in a parent component.
  But it should just have a border style 
</div>

.upper-class .inner-class {
  color: red;
}
.inner-class {
  border: 1px solid black;
}

Either way, this is unlikely to change as it would be a breaking change at this point.

Understandable. I am not asking for a change. It just confuse me a bit and hope other can notice this behavior if they are facing the same issue..

In my case, it does happen when I am writing my component to our project using scoped CSS. it works great when I test. Other team members took it to use as a component in the project. As a result, other components are affected because we are using the same class name .card-title.

It can easily happen in a team based project or using other 3rd party package because we always don't know how others name classes.

Standard use case, Standard CSS. Simple enough. I don't think anything bad we are doing. but it does happened.