Once I extended the <sl-button> component in Lit, I realized that TypeScript was not catching errors for incorrect attributes being passed. For instance, in the code snippet provided below, when I use <sl-button> with an incorrect attribute, TypeScript correctly displays an error. However, if I use <my-button> with a wrong attribute, TypeScript does not show any errors.
import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
import {html} from 'lit';
import {customElement} from 'lit/decorators.js';
@customElement('my-button')
export default class MyButton extends SlButton {
constructor() {
super();
}
}
export const Demo = () =>
html`
<my-button size="not-exists">Click here!</my-button> // shows no error on "size"
<sl-button size="not-exists">Click here!</sl-button> // shows error on "size"
`;
declare global {
interface HTMLElementTagNameMap {
'my-button': MyButton;
}
}