Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-zm8kzw?file=src%2FApp.vue

Steps to reproduce

No need to do anything, just see it

What is expected?

v-bind works (the font color should be blue in the example)

What is actually happening?

v-bind in the style module in sfc does not work as expected when using defineCustomCoponent.

The css variable generated by v-bind in the custom element should be bound to the host element, but instead, it is bound to the host child element.(在自定义元素中 v-bind 生成的 css 变量未正确绑定到 host 元素)

System Info

No response

Any additional comments?

No response

https://vuejs.org/guide/extras/web-components.html

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes('-')
        }
      }
    })
  ]
}

https://vuejs.org/guide/extras/web-components.html

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes('-')
        }
      }
    })
  ]
}

Adding these configurations doesn't help either.

https://stackblitz.com/edit/vitejs-vite-gtl19y?file=src%2FApp.vue

My local works fine

Sorry, I had a problem with the previous example, take a look at the following example. https://stackblitz.com/edit/vitejs-vite-zm8kzw?file=src%2FApp.vue