Interface 'HTMLMyButtonElement' cannot simultaneously extend types 'MyButton' and 'HTMLStencilElement'. Named property 'focus' of types 'MyButton' and 'HTMLStencilElement' are not identical

Stencil
1

I’m getting this error, when I try to expose a Method focus.

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 {
}

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 using skibLibCheck ?

1 Like