:slotted() style does not work in SSR when multi component slotted the same compoennt
Vue version
3.2.36
Link to minimal reproduction
https://codesandbox.io/s/vue-ssr-slot-id-bug-4bjevz?file=/src/App.vue
Also made a sfc playground for bug reproduction
Steps to reproduce
App.vue
<template>
<div>
<Inner>
<Item />
</Inner>
</div>
</template>
<script>
import Inner from './Inner.vue'
import Item from './Item.vue'
export default {
components: {
Inner,
Item
}
}
</script>
Outer.vue
<template>
<div>
<slot />
</div>
</template>
<style scoped>
:slotted(*) {
background: red
}
</style>
Inner.vue
<template>
<Outer>
<slot />
</Outer>
</template>
<script>
import Outer from './Outer.vue'
export default {
components: {
Outer
}
}
</script>
<style scoped>
:slotted(*) {
color: blue
}
</style>
Item.vue
<template>
<button>Test</button>
</template>
What is expected?
The button has red background and blue text in rendered HTML.
Because the button is slotted by both component
What is actually happening?
No Style is applied and there are warning in the server console
[@vue/server-renderer] Skipped rendering unsafe attribute name: data-v-9cfee1a6-s data-v-3fa8c6d2-s
System Info
System:
OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
Memory: 7.35 GB / 62.72 GB
Container: Yes
Shell: 5.0.3 - /bin/bash
Binaries:
Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.1/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
npmPackages:
vue: 3.2.36 => 3.2.36
Any additional comments?
It seems the @vue/server-renderer forgot the handle the situation that scopeId is a white-space separated list.
And try to use something like data-v-9cfee1a6-s data-v-3fa8c6d2-s as attribute name
Probably the faulty line
1
Is there anyone also encountered this issue? The issue and pull request is opened for several months and without comment at all. This bug breaks my style so I need to patch it locally. But I would like this to be fixed in vue itself instead of lying in my project patchset forever.