如何使用 Lit 在 Typescript 中扩展 Shoelace Web 组件

Question

在 Lit 中扩展 组件后，我没有收到错误属性的 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;
  }
}

Answer 1

这似乎按预期工作。我相信您正在寻找的不是 TypeScript 错误，因为 TS 不关心 HTML 属性，而是编辑器的代码完成。

我怀疑您正在使用 VS Code 以及以下提供的自定义数据鞋带。这就是告诉 VS Code 有关已注册 Shoelace 元素的信息，如果您打开 dist/vscode.html-custom-data.json 您将看到每个标签和可用属性列表。

如果您要扩展和重新标记 Shoelace 元素，则需要向 VS Code 提供您自己的自定义数据。

---

有几点需要注意：

首先，当您导入 components/button/button.js 时，您仍然在注册 Shoelace 按钮。事实上，您的代码正在注册 和 因为注册是在导入时发生的。

其次，Shoelace 组件并不是为了重命名而构建的。许多东西依赖于标签名称来工作，例如 期望子元素为 和 < ;sl-tab-group> 需要 和 子级。重命名它们会以意想不到的方式破坏事情。