Как расширить веб-компонент Shoelace в Typescript с помощью Lit
После расширения компонента <sl-кнопка> в Lit я не получаю ошибок Typescript для передачи неправильных атрибутов. Например, в приведенном ниже фрагменте кода, когда я вызываю <sl-button> с неправильным атрибутом, typescript показывает ошибки, но если я вызываю <my-button> с неправильным атрибутом, typescript не показывает никаких ошибок.
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;
}
}
Ответы 1
Похоже, это работает так, как ожидалось. Я считаю, что вы ищете не ошибку TypeScript, поскольку TS не заботятся об атрибутах HTML, а автодополнение кода для вашего редактора.
Я подозреваю, что вы используете Код VS с пользовательскими данными, предоставленный Shoelace. Это то, что сообщает VS Code о зарегистрированных элементах Shoelace, и если вы откроете dist/vscode.html-custom-data.json, вы увидите каждый тег и список доступных атрибутов.
Если вы расширяете и повторно помечаете элементы Shoelace, вам необходимо предоставить свои собственные данные для VS Code.
Пара замечаний:
Во-первых, когда вы импортируете components/button/button.js, вы по-прежнему регистрируете кнопку шнурка. На самом деле ваш код регистрирует и <sl-button>, и <my-button>, потому что регистрация происходит при импорте.
Во-вторых, компоненты Shoelace не предназначены для переименования. Многие полагаются на имена тегов, чтобы что-то работало, например <sl-menu>, который ожидает, что дети будут <sl-menu-item>, и <sl-tab-group>, который ожидает <sl-tab> и <sl-tab-panel> детей. Их переименование приведет к неожиданным поломкам.