Version

3.2.6

Reproduction link

https://github.com/conanliuhuan/vite-vue-full-build-webcomponent-bug

Steps to reproduce

1、Switch to full vue build in vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
      alias: {
          'vue': 'vue/dist/vue.esm-bundler.js'
      }
  }
})

2、Add isCustomElement in main.js:

import { createApp } from 'vue'
import App from './App.vue'

var app = createApp(App);
app.config.isCustomElement = tag => tag === "my-component";

app.mount('#app')

3、Define a web componnet then use it in App.vue:

<template>
    My custom component can NOT display:
    <my-component />
</template>

<script>
class MyComponent extends HTMLElement {
    constructor() {
        super();

        var container = document.createElement('div');
        container.classList.add('container');

        var name = document.createElement('p');
        name.classList.add('name');
        name.innerText = 'Custom component';

        container.append(name);
        this.append(container);
    }
}
window.customElements.define('my-component', MyComponent);
</script>

What is expected?

Display web component correctly

What is actually happening?

[Vue warn]: Failed to resolve component: my-component

You likely misunderstood this sentence in the docs for isCustomElement:

This config option is only respected when using the full build (i.e. the standalone vue.js that can compile templates in the browser). If you are using the runtime-only build with a build setup, compiler options must be passed to @vue/compiler-dom via build tool configurations instead.

What that means is that the runtime config that you used is only respected when doing runtime compilation of in DOM/sring templates.

When you use .vue files, like you do, you still have to set the option in the build process options, i.e. for vite:

https://github.com/vitejs/vite/tree/main/packages/plugin-vue#options

BTW, you should also upgrade @vue/compiler-sfc to 3.2.6

...and defining web components like this in a vue file is not really the intended workflow.

...and defining web components like this in a vue file is not really the intended workflow.

If I want to load some .vue file (from backends) in production environment, how to do that?