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

Question

在 Lit 中扩展 <sl-button> 组件后，我没有收到因传递错误属性而导致的 Typescript 错误。例如，在下面的代码片段中，当我用错误的属性调用 <sl-button> 打字稿显示错误，但如果我用错误的属性调用 <my-button> 打字稿不显示任何错误。

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 with the custom data provided by Shoelace. This is what tells VS Code about registered Shoelace elements, and if you open up dist/vscode.html-custom-data.json 您会看到每个标签和可用属性列表。

如果您要扩展 re-tagging 鞋带元素，则需要向 VS Code 提供您自己的自定义数据。

几个注意事项：

首先，当您导入 components/button/button.js 时，您仍在注册鞋带按钮。事实上，您的代码同时注册了 <sl-button> 和 <my-button>，因为注册发生在导入时。

其次，鞋带组件不是为了重命名而构建的。许多依赖标签名称来工作，例如 <sl-menu> 期望 children 为 <sl-menu-item> 和 <sl-tab-group> 期望 <sl-tab> 和 <sl-tab-panel> children。重命名它们会以意想不到的方式破坏事物。

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

How do you extend Shoelace web component in Typescript using Lit

typescript

web-component

lit

shoelace