LionSelectInvoker improper typing?
nbamfordcirium opened this issue · comments
Expected behavior
I have overriden the LionSelectInvoker getSlots
method with the following definition for the after
function:
export class MySelectInvoker extends LionSelectInvoker {
get slots() {
return {
...super.slots,
after: () => {
return html`
<span style="display: flex; align-items: trailing;">
${this.htmlClearButton} ${this.htmlSuccessIcon}
${MySelectInvoker.htmlDropdownIcon}
</span>
`;
},
};
}
}
This works fine in the select and I did not expect to get any typescript errors.
Actual Behavior
I get the typescript error: Property 'slots' in type 'EvSelectInvoker' is not assignable to the same property in base type 'LionSelectInvoker'. Type '{ after: () => TemplateResult<1>; }' is not assignable to type '{ after: () => HTMLSpanElement; }'.
Which makes sense, because LionSelectInvoker.d.ts
has the type defined as:
get slots(): {
after: () => HTMLSpanElement;
};
I've worked around the issue by casting the return as unknown as HTMLSpanElement
, but I feel uneasy shortcircuiting lion types like this. Am I okay returning the templateresult like I have (which seems to work fine in the browser)? Or is the type in LionSelectInvoker.d.ts
simply too restrictive?
Additional context
LionSelectRich, @lion/ui@0.4.1