Components within slot components are missing `data-v-<id>` attribute from parent's scoped styles

[eli-crow]

Version

16.0.0-alpha.3

Reproduction link

https://codesandbox.io/s/children-of-router-links-are-missing-data-v-id-attribute-from-parents-scoped-styles-7lj1y?file=/src/App.vue

Steps to reproduce

1. Create a vue (3.0.0-beta-14) project with single-file components set up with vue-next plugin for vue cli (vue-laoder 16.0.0-alpha.3).
2. In App.vue, Place a child component inside a component that provides a default slot. Give the child component the class example-child-component.
3. In App.vue, add a scoped style tag and create a ruleset for .example-child-component
4. The scoped styles will not be applied to the child component. Non-component children work as expected.

What is expected?

The scoped styles from App.vue should be applied to the child component.

What is actually happening?

The scoped styles are not being applied to the child component because the data-v-<id> attribute from the parent scope is not being applied to the child component.

---

• Non-component children work as expected.

[mkarras]

I got the same problem with a custom link component using vue-router 4.1.6 under vue 3.2.45 with vite plugin @vitejs/plugin-vue 4.0.0:

LinkComponent.vue

<template>
   <RouterLink custom ...>
      <a ...><slot /></a>
   </Routerlink>
</template>

In parent:

<template>
    <LinkComponent class="custom-styling">my link</LinkComponent>
</template>

<style lang="postcss" scoped>
   .custom-styling {
       @apply whatever;
    }
</style>    

The styling has no effect because of missing scoping (data-v-...) at the a-element of LinkComponent.vue. Worked in vue 2 ("vue": "~2.6.14", "vue-router": "^3.5.1", "vue-template-compiler": "~2.6.14", "vite-plugin-vue2": "^2.0.2") before upgrading to vue 3 and vue-router 4.

I posted this already in https://github.com/vuejs/router/issues/291#issuecomment-1362519542 but the issue was closed because of this one here. It was mentioned that vite does not depend on vue-loader. So im not sure if this is really a bug in vue-loader.

[Pierrad]

Hi @mkarras, did you manage to find a solution to this ?

I have the same problem with some data-v-id that are not applied when I upgrade to Vue 3 stack (Vue 3.2, Vue-Loader 17, Vue-Router 4.1.6...)

Thanks

[mkarras]

Hi @Pierrad not really but i found a workaround by using the with vue router 4 new useLink composable. You can find a example implementation here: https://github.com/vuejs/router/issues/1641