Corrected and improved docs on type definitions for Custom Elements.

[trusktr]

The doc was incorrect for two reasons:

• For Vue-based custom elements, the types passed into GlobalComponents need to be the Vue component types, not the custom element types, or the custom elements will not be type checked in Vue templates.
• The name of the elements need to have at least two words and a hyphen, otherwise with single words the custom elements will not work at all.

A few questions:

• Should we include working examples?
  • Here's an example for non-Vue custom elements: https://github.com/lume/element/tree/vue-type-issue/examples/kitchen-sink-vue
• Should we include something like the DefineCustomElement type helper in vue?
• Should we add type tests?

Having examples/helpers/tests could prevent the docs from being incorrect.

There's a conversation in #typescript in Vue's Discord where we chatted about and worked on this.

The conversation includes the idea of updating vue-tsc so that Custom Element type definitions can instead be added to IntrinsicElementAttributes, which I tried at first but it currently does not work. Only built-in elements on IntrinsicElementAttributes work, so I resorted to using GlobalComponents with the $props and $emit hacks which results in element ref types exposing non-existent $props and $emit properties to the user.

So one more question is:

• Do we merge this update now so it is correct with the current state of vue-tsc? Or do we wait until vue-tsc can be updated so that hyphenated element names can successully be added to IntrinsicElementAttributes, and update these docs to show the proper way of defining element types with IntrinsicElementAttributes? cc @KazariEX @johnsoncodehk

[netlify]

✅ Deploy Preview for vuejs ready!

Name	Link
🔨 Latest commit	9da839d
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs/deploys/67368327140d8b00086655bc
😎 Deploy Preview	https://deploy-preview-3073--vuejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[trusktr]

Alright, updated and ready for initial review.

[NataliaTepluhina]

@trusktr thank you for working on this, it's an extremely valuable and detailed addition to the documentation!