Open OpenGG opened 2 years ago
I'd not rate this a bug as the SFC spec explicitly states that the style scoping only extends to the root element of a child component, but I see a use in discussing how to enhance the behaviour for this specific usecase
In the meantime, we have :deep()
to extend styles to deeply nested elements as well as css modules as usable alternatives.
@LinusBorg
Noted.
Maybe css-modules fit this use case better, but the Vue community invested in scoped styles, so...
Sure, as I said I see the use here. So far it's just a blind spot in the spec. One that can be worked around with :deep()
at least.
Version
3.2.26
Reproduction link
stackblitz.com SFC Playground
Steps to reproduce
AttrsComp.vue
: setinheritAttrs=false
, pass attrs to child<img v-bind="$attrs">
.App.vue
: render<AttrsComp class="test" />
, where.test { width: 90vw }
is defined in<style scoped>
What is expected?
<img class="test">
<img >
rendered with 90vw widthWhat is actually happening?
<img class="test">
✅<img>
rendered with default width ❌Use case:
AttrsComp.vue
was once single<img>
, inheriting scoped class fromApp.vue
.AttrsComp.vue
refactored into<picture>
, all attrs should be passed into child<img>
Due to this issue, all classes passed into
<AttrsComp>
must be moved to non-scoped, which breaks component encapsulation.