Shoelace Typescript Compilation Error with Typescript 5.9.2

[schilchSICKAG]

Hi there,

while upgrading a project using Shoelace (latest version) from Typescript 5.8 to 5.9.2 i noticed there are multiple components that throw errors with the latest stable ts version. The errors can be traced back to the implementation of the property autocorrect, that is defined as string for example in SlInput. Typescripts lib.dom.d.ts defines the property as autocorrect: boolean. Typescript 5.9 seems to be more strict (it seems that 5.8 also defines it this way) and is not able to compile anymore.

You may try the following example for this (taken from a vite sample and shortened for brevity here):

import * as sl from '@shoelace-style/shoelace';

// This is just done to create an easily reproducible example.
// It does not matter what you do with SlInput, when you use it,
// it will crash
class MyInput extends sl.SlInput { 
  render() {
    return super.render();
  }
}

customElements.define('ts59broken-input', MyInput);

The code leads to the following compiler error in TS5.9:

src/main.ts:23:36 - error TS2345: Argument of type 'typeof MyInput' is not assignable to parameter of type 'CustomElementConstructor'.
  Construct signature return types 'MyInput' and 'HTMLElement' are incompatible.
    The types of 'autocorrect' are incompatible between these types.
      Type 'string' is not assignable to type 'boolean'.
        Type 'string' is not assignable to type 'boolean'.

23 customElements.define('ts59broken-input', MyInput);

As the lib.dom.d.ts was not changed, I assume it is some heuristic in Typescript itself that is now way stricter checking. It basically happens because ShoelaceElements extend LitElement that extends HTMLElement from lib.dom.d.ts, which has the boolean value in it.

It may very well be that this also affects WebAwesome, too.

[schilchSICKAG]

Some further information about this issue (with links to preconfigured TS Playrounds):

TS 5.8.3 This errors because HTMLElement does not have autocorrect defined for HTMLElement at all. If we would create a new LitComponent and extend LitElement, it will be there (propably via @property) and will not crash. For fun, I checked if HTMLInputElement has it defined. Turns out, TS is not aware of autocorrect at all (which is probably the reason it did not crash before with older ts versions...).

TS 5.9.2
Notice that the same code will now produce a different error (Type mismatch). This is because Typescript now defines autocorrect on HTMLElement directly and Shoelace / WebAwesome override it with a String.

[niboan]

Any chance for a fix or a workaround for this one? It's becoming an increasing problem, as more and more packages depend on Typescript 5.9.
Now it is preventing us from upgrading to Angular 21.

[claviska]

Sorry, Shoelace is effectively in maintenance mode, as we're focusing all of our effort on Web Awesome. We'll gladly work with anyone who would like to work on a PR, though!

[niboan]

Thanks, I suspected that ;-)
Migration to Web Awesome is in the pipeline, so I may have to move it up.

Is Web Awesome affected as well, as suggested by @schilchSICKAG? It seems to be using Typescript 5.8.3 itself (based on the package-lock.json).

[claviska]

I added this issue to track the upgrade in WA shoelace-style/webawesome#1982