Version

3.2.11

Reproduction link

codepen.io

Steps to reproduce

1. Define 2 custom element
2. Embed one into the other

What is expected?

render components

What is actually happening?

render component is complete, but in console

[Vue warn]: Failed to resolve component: test-case-inside 
  at <App >

https://v3.vuejs.org/guide/web-components.html#skipping-component-resolution

Yes, I tried to use it as

const App = Vue.createApp({});
App.config.compilerOptions.isCustomElement = tag => tag === 'test-case-inside';

but it not work. Add compilerOptions in attached CodePan

Ah ok, you are nesting one custom element in another. Since custom elements are registered globally and not under a normal Vue app, configuring an app instance has no effects on them. You need to pass the compilerOptions inline:

customElements.define(
  'test-case',
  Vue.defineCustomElement({
    compilerOptions: {
      isCustomElement: tag => tag.startsWith('test-')
    },
    template: `<test-case-inside></test-case-inside>`
  })
)

You'll probably want this for all elements you define if you intend to nest them in one another - you can create a convenience function that wraps the the all the define calls for easier element creation.

Thanks