Typing Issue When Redefining HTMLElement Built-In Properties

[au-z]

Hello again @smalluban!
Thanks again for a great 7.0 release. It's been largely really stable as I've upgraded quite a few projects. 👍

Something I've noticed related to Typescript - the type for Component does not seem to allow redefinition of HTMLElement properties. This poses a typing problem for components which would like to redefine a built-in property title or lang for example.

Minimal Reproduction:
https://stackblitz.com/edit/typescript-h6sc4x?file=index.ts

You mention this briefly in your Built-Ins section here:
https://hybrids.js.org/#/component-model/typescript?id=built-ins

Functionally, this pattern works well and can be desirable for achieving an ideomatic component interface. On the other hand, I would understand your hesitancy to allow overriding certain properties.

WDYT?

[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.