-
-
Notifications
You must be signed in to change notification settings - Fork 8.8k
Closed
Labels
🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.has PRA pull request has already been submitted to solve the issueA pull request has already been submitted to solve the issuescope: slotsscope: ssr
Description
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
core/packages/server-renderer/src/render.ts
Lines 170 to 173 in bdffc14
if (slotScopeId) { | |
if (!hasCloned) attrs = { ...attrs } | |
attrs![slotScopeId.trim()] = '' | |
} |
Probably the faulty line
serious-angel and lukastaegert
Metadata
Metadata
Assignees
Labels
🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.has PRA pull request has already been submitted to solve the issueA pull request has already been submitted to solve the issuescope: slotsscope: ssr