bug: Interface ‘HTMLMyButtonElement’ cannot simultaneously extend types ‘MyButton’ and ‘HTMLStencilElement’. Named property ‘focus’ of types ‘MyButton’ and ‘HTMLStencilElement’ are not identical #4467
Description
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
3.0.1
Current Behavior
Can't compile Stencil because of the typescript error
Error: Interface 'HTMLMyButtonElement' cannot simultaneously extend types 'MyButton' and 'HTMLStencilElement'.
Named property 'focus' of types 'MyButton' and 'HTMLStencilElement' are not identical.
Interface 'HTMLMyButtonElement' cannot simultaneously extend types 'MyButton' and 'HTMLStencilElement'.Named property 'focus' of types 'MyButton' and 'HTMLStencilElement' are not identical.
'./src/components.d.ts'
interface HTMLMyButtonElement extends Components.MyButton, HTMLStencilElement {
}
Steps to Reproduce
I want to focus the button element which is inside the my-button, when my-button.focus() is called. Here is the code
@Component({
tag: 'my-button',
styleUrl: 'my-button.scss',
shadow: true,
})
export class MyButton {
buttonRef: HTMLButtonElement;
@Prop() disabled = false;
@Method()
async focus() {
this.buttonRef.focus();
}
render() {
return (
<button
ref={el => (this.buttonRef = el)}
disabled={this.disabled}
>
<slot />
</button>
);
}
}
Any ideas how to solve this without modifying typescript config file by adding : compilerOptions > "skipLibCheck": true,
Metadata
Metadata
Assignees
Labels
No labels