Scoping does not work as expected when using :is and :where selectors in Vue 3.3.9
Vue version
3.3.9
Link to minimal reproduction
Steps to reproduce
There is text "foo" with green background and text "bar" with green background. The associated styles are in Foo.vue component.
What is expected?
The text "foo" is expected to have lightgray background and the text "bar" to have red background, as it have if one use Vue version 3.3.8.
What is actually happening?
There was a pull request https://github.com/vuejs/core/pull/8929 which fixed https://github.com/vuejs/core/issues/8915 but it introduced issues with scoping.
When there is :is or :where selector in a rule, Vue seems to now scope the first selector only.
Example 1
:is(.foo, .bar) -> only .foo is scoped
Example 2
:where(html .foo) -> .foo is scoped which is expected
Example 3
:where(html) .foo -> html is scoped instead of .foo
System Info
System:
OS: Linux 6.5 Pop!_OS 22.04 LTS
CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-1370P
Memory: 3.66 GB / 31.03 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 20.9.0 - /run/user/1000/fnm_multishells/115870_1701167364483/bin/node
npm: 10.1.0 - /run/user/1000/fnm_multishells/115870_1701167364483/bin/npm
pnpm: 8.11.0 - ~/.local/share/pnpm/pnpm
Browsers:
Chrome: 119.0.6045.159
Any additional comments?
My original use case and how I discovered this behavior was by using a postcss plugin that helps you with setting light or dark theme using a class on html element. It allows one to write prefers-color-scheme: dark media queries but enable overriding it by using .is-light and .is-dark classes on the html element. It has to use :where pseudo selector in order to not increase the specificity of affected selectors.
Here is an example: https://stackblitz.com/edit/github-wm2wq5-fkzdgu?file=app.vue In the example there is text "foo" which is expected to be green, not red, for prefered theme dark.
Awesome, you guys are fast!