Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqlkk1PwzAMhv+KFSFllbr0AKcCE4g7N06Uw9Z4a6FNoiQdoKn/HSfNPjQkBOKQNrEdv6+fdsfujRHbAVnJblxtW+MXlYK2N9p62EEDI6yt7oFTDT9mHpq2kykjingKXUIF0Kq1ch4e0XmUcAuzDG4X0My4bLc8DxtDL65inmfZ9eHKk5qCp5di7ZASPBRTOX5EHxLXy6Ejp0EYLCqJli5OxxDwg1VH5R3U3dK5Evhaaw5jDs/cUtPgKQ6Rn3vlrtOeLIaKaZ643fvMXrIoNdKT1k1xYEgH5z87BFdrgzJQBWoZLOhO25K8yet4LwADs/ecsqtuwIAldQ2dFixnB9K//V7/4xQxBUqpDoBvLKLi+SEghPBN68RFAOVEEppNWAD+xEeQ3BFQVIqITgBMk877pRGvTivCEGeoUsJVrNxPVTFiEM4Va7w3riyKQZm3jah1X9xRrrCD8m2Pc6n7u0txKa4K2Tp/Ghbo+vnK6neHlgQrlgaPvQsKbtHOJ5xof9Q6qz3VO0t900y/wcjGL8CVMo8=

Steps to reproduce

1. Inside a render function, create an element with a child element.
2. Set the scoped attribute on the style tag.
3. Add styles for the child element using any selector.

What is expected?

The 'nested' p tag should be blue

What is actually happening?

The nested p tag is red.

System Info

No response

Any additional comments?

Related issue: https://github.com/vuejs/core/issues/1539

@davidleger95 According to me it is working fine.

To check this I have simplified your example Link: Simplified Version Preview:

Note: Your style section of the component

<style scoped>
  p {
    color: blue;
  }
</style>

Gets Converted to

p[data-v-472cff63] {
    color: blue;
}

Actually rendered is something like this

Note: P tag does not have data-* attribute so CSS style will not get applied here.

If you want to apply some CSS to child components you need to use :deep Ref: https://vuejs.org/api/sfc-css-features.html#scoped-css

  :deep(p) {   // this way you can style child elements
    color: blue;
  }

Nested is a functional component. as such, its contained elements will not receive the scoped styling from its parent, except for the root element. In that regard, functional components work just like normal components: only the (single) root element will inherit scoped styles from the parent.