LionSelectInvoker improper typing?

[Nathan Bamford]

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