CSS combinators are not applied to slotted components

henkvhest

Sep 1st 2023

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vue3-vite-starter-cg2zvz?file=package.json

Steps to reproduce

Open the App.vue. It contains a component which has a slot filled by some

elements. The component also contains some static

items which have styling applied by a combinator. The same styling is however not applied to the

that is passed down via the slot.

First noticed this regression when migrating items from Nuxt 2 to Nuxt 3 (it used to apply styling to both in the past). But it also seems to affect Vue 3+ vite in general.

What is expected?

I expect combinator styling to be passed down to slotted components too

What is actually happening?

styling with combinators are not applied to slotted components

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.10 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

LinusBorg

Sep 1st 2023

Slot content is not affected by scoped styles by default - on purpose. Slot content is technically part of the parent template.

So if you explicitly do want to affect elements passed in through a slot, you need to use :slotted()

https://vuejs.org/api/sfc-css-features.html#slotted-selectors

<style lang="scss" scoped>
.list > li + li, :slotted(.list > li + li) {
  margin-top: 16px;
  padding: 0;
}
</style>

GitHub Track