In Vue 3, shadow components cannot be named using all capital letters. They can only be recognized as shadow components when they are named in kebab-case.

[maxfrees]

Vue version

lastest

Link to minimal reproduction

Steps to reproduce

✅

  <cropper-canvas ref="croppercanvas" background />

❌

  <CropperCanvas ref="croppercanvas" background />

What is expected?

fix

What is actually happening?

System Info

Any additional comments?

No response

[skirtles-code]

Without a reproduction I'm not exactly sure what's been reported here.

By 'shadow components', do you mean web components? So you're trying to use a custom element inside a Vue SFC?

How are you registering the custom element? When I try to use customElements.define('CropperCanvas', CC) I get an error because the name CropperCanvas is not valid for a custom element. See:

• https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names

I don't think there's a bug here, custom elements should use kebab-case in templates. Vue's case conversion for tag names only applies to Vue components.