Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.17.0

Current Behavior

We have tried to import the components.d.ts in a TypeScript 4.6 project and got an issue with the compilation:

components.d.ts:1557:15 - error TS2320: Interface 'HTMLIconSelectElement' cannot simultaneously extend types 'IconSelect' and 'HTMLStencilElement'. 
Named property 'ariaLabel' of types 'IconSelect' and 'HTMLStencilElement' are not identical.

The component contains @Prop() ariaLabel: string | null = null;

Adding some module augmentation to own d.ts file to the project still fails:

declare module '@stencil/core/internal' {
  export interface HTMLStencilElement {
    ariaLabel: string | null;
  }
}

Interface 'HTMLIconSelectElement' incorrectly extends interface 'HTMLStencilElement'.Types of property
'componentOnReady' are incompatible.Type '() => Promise<HTMLStencilElement>' is not assignable to type '()
=> Promise<this>'.

Expected Behavior

Extending the existing embedded lib.dom.ts copy should be possible without any issues.

Steps to Reproduce

Create a component with @Prop() ariaLabel: string | null = null; and let it build.

If you disable the strict mode and enable interface HTMLMyComponentElement in the aria-mixin.d.ts it will work, but we are using strict mode.

Code Reproduction URL

https://github.com/CSchulz/stencil-module-augmentation

Additional Information

No response