Skip to content

:slotted() style does not work in SSR when multi component slotted the same compoennt #6093

@mmis1000

Description

@mmis1000

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

https://play.vuejs.org/#__SSR__eNq1U01PwzAM/StRLnwIrQduVYUEaIdxYAh27KVrvdEtS6rEHUPT/juO049NlHFASFVr+9nOs/uyl/dVNdrWIGOZIGwqlSHcpVqIpCi3bJA50Rps43iXEkXUglGPJlEoSqKjVonLbVkhWeWmMhYF54uFNRtxMQrVnsFFn+D7dzg5DQw7hgtYZLVCsfdH5oZqNGh0cQiI0P+msanaW4dU05NEDRd5I9HlRi/K5WjljKbpuTiVvl+pwE4rLI12qezapjJTynw8cQxtDc0RVPMO+XogvnI7H0vliwUHdgup7DDM7BIwwOO3Z9iR3YEbU9SKss+Ar+CMqj3HkPZQ64JoH+Ux2wlvtNTLmRvvELRrh/JEeTGcn0ra8OOZ0Xu6t6PbdqG0xe7vnerHshqmNXphsEOuUwa9bAIY9eixXMjlUCsashtVcH4nC/aCLijlmzL4jFNtNDS4MDgH/+FXJ4z+fPxUIEgjFRQcjT19hOLy+qrvr4yNxVzRKo86+UqvsI7i0G74ovywmRb7ZS9DQ/9xonmWr5fWkJZiYaEYmqq9j0NDzWtEo+9m4DCJGuefBundltrhC2wFp+s=

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

if (slotScopeId) {
if (!hasCloned) attrs = { ...attrs }
attrs![slotScopeId.trim()] = ''
}

Probably the faulty line

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 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 issuescope: slotsscope: ssr

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions