Since 4.38.1 and this commit https://github.com/stenciljs/core/commit/fb16240a8d2d32050dcd75f1ecb6a2adb1020bb7 the code bellow make the build failed while it works before the edit of HTMLStencilElement. HTMLStencilElement is now incompatible with HtmlElement because you Omit autocomplete: boolean and replace with autocomplete: 'on' | 'off' which is not present for now in the current version of the type dom.generated.d.ts (https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L14108) in Typescript
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
/**
* The element reference
*/
@Element() el: HTMLMyComponentElement;
componentDidLoad() {
const slotted = this.el.shadowRoot.querySelector('slot[name="child"]') as HTMLSlotElement;
console.log(slotted?.assignedElements() as any as HTMLMyComponentChildElement[] ?? "slotted elements not already available");
this.test(this.el);
}
test(element: HTMLElement) {
console.log(element);
}
}To reproduce the problem, you just need to run npm run build and you will retrieve this TS error in your console :
[ ERROR ] TypeScript: src/components/my-component/my-component.tsx:38:15
Argument of type 'HTMLMyComponentElement' is not assignable to parameter of type 'HTMLElement'.Types of
property 'autocorrect' are incompatible.Type 'string' is not assignable to type 'boolean'.Type 'string' is
not assignable to type 'boolean'.
L38: this.test(this.el);
L39: }
[23:41.8] build failed in 4.20 s