Typing Issue When Redefining HTMLElement Built-In Properties about hybrids

[smalluban]

Hi @auzmartist!

It's been largely really stable as I've upgraded quite a few projects. 👍

Great!

About the problem, it is a TS limitation, or I don't know some hidden feature. The Component type takes a generic type, and it must iterate over the props to map the interface values to the hybrids properties definitions according to the API. Unfortunately, if you extend the interface, there is no way to know, which props are from the definition itself or from the base (by the extends). In the end, if you create an interface with HTMLElement base, without extracting, there is another problem - TS complains that values in the passed object to the define() function do not meet the required type.

EDIT: I dig into the definition of the types, and there might be a solution, but only halfway, so I am not sure if then it will be more confusing. The Extract can take keys from the condition, so if the interface does not extend HTMLElement, it would be possible to define any property:

Extract<
  keyof Omit<E, E extends HTMLElement ? keyof HTMLElement : keyof {}>,
  string
>

However, I personally think that overwriting built-in props might not be the best idea, as sometimes their original functionalities can be broken. It is still possible to do with plain JS, but in TS the types protect from doing it. And what I am aware of, there is no full solution right now in the language.

[smalluban]

@auzmartist Feel free to re-open if you need some more help here.