the scoped style is not fully scoped

[wjxxx0201]

Vue version

3.5.17

Link to minimal reproduction

https://play.vuejs.org/#eNqNUk1vEzEQ/SuDLwEp3a1EuSwp0hZVAg6AAImLLxvvZNet17bG3jQQ5b8z9iZpIqqqPtnvvfF8va2ovS/WI4pKLIIi7SMEjKP/IK0evKMIWyBcwQ5W5AaYsXQm7ZGs93BR1umXTClnQ4QhdHCdQl/PPqExDn47Mu2r2RtpF+WUiXPwI+LgTRORXwCLVq9BmSaEaynIuShFxpmpoZwkJWv4tihPIvkZ4h+DEJTz2DJSpGjYpogH3ca+gneXl37zPgE96q6Pp8iyUfcdudG2F8oZRxV0hGiZ2+V609/8qZiLyBnsSnfFXXCWp5YzSKHc4LVB+uaj5v6lqKbciWu4/YcvGYs04vyAqx7V/RP4XdgkTIrvhAFpjVIcudhQhzyVRN/+/Iobvh/JwbWjYfUz5A8Mzoypxkl2wy1z2Se6XO3nvF5tu1/hdhPRhkNTqdCk3GW9FLz0j8+0/lju2+Iqx/FEeYrZLclzL93+KdMwXKdzsMJ/iiUrbtJ5VLzUNs28WE71742wNCNmj6ycjRdB/8UKribfcDN7o1W9WyNB0ZyFErZPqs4T+JG8SSnOrbb7B2wTMxk=

Steps to reproduce

the scoped style is not fully scoped.
it will affect outside components.
just like #6214

if outside components use class root and hovered, .a will be red.

<style scoped> .root:hover .a { color: red; } </style>

What is expected?

.root[xxx]:hover .a[xxx2] {
color: red;
}

What is actually happening?

.root:hover .a[xxx2] {
color: red;
}

System Info

Any additional comments?

If this is unlikely to change as it would be a breaking change at this point, can a new method be added? like :scoped()?
Or is there any way to better handle this type of case at present?

[Justineo]

See #12244 (comment)