What problem does this feature solve?

It is not reasonable to specify all html attrs & events on a button component inside defineComponent. However if you do not specify them, the tsx (not ts) type checking shall no pass.

1. Using functional component may work to some extent, however it doesn't normalize prop name to camel case.
2. Setting ComponentCustomProps is also not okay since if effects all components.

// we know native events and attrs can be inherited from outer component.
// but how to make it work with tsx type checking as expected?
defineComponent({
  name: 'MyButton',
  render () {
    return h('button', null, this.$slots)
  }
})

What does the proposed API look like?

Not quite sure.

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

For people who may see the issue later. I find a way to support tsx. However please know that it's not compitable with h.

const Button = defineComponent({ ... })

type ButtonProps = ExtractPropsType<typeof Button>

type NativeButtonProps = Omit<ButtonHTMLAttributes, keyof ButtonProps>

type MergedProps = ButtonProps & NativeButtonProps

const XButton: new () => { $props: MergedProps } = Button as any

In the example, XButton accepts any button html attrs.