如何使用Lit在打字本中扩展Shoelace web组件

Question

在Lit中扩展https://shoelace.style/components/button组件之后，我不会收到传递错误属性的类型记录错误。例如，在下面的代码片段中，当我用错误的属性调用<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代码中关于注册鞋带元素的信息，如果打开dist/vscode.html-custom-data.json，您将看到每个标记和可用属性列表。

如果您正在扩展和重新标记鞋带元素，则需要向VS代码提供您自己的自定义数据。

几个人注意到：

首先，当您导入components/button/button.js时，您仍然注册一个Shoelace按钮。实际上，您的代码同时注册了<sl-button>和<my-button>，因为注册是在导入时进行的。

第二，鞋带组件不会被重新命名。很多事情都依赖于标签名才能起作用，比如<sl-menu>，它希望孩子是<sl-menu-item>，<sl-tab-group>期望<sl-tab>和<sl-tab-panel>子级。重命名它们会以意想不到的方式破坏事物。