在 Lit 中擴展<sl-button>組件后，我沒有因為傳遞錯誤的屬性而收到 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;
}
}
uj5u.com熱心網友回復：
這似乎按預期作業。我相信您要查找的不是 TypeScript 錯誤，因為 TS 不關心 HTML 屬性，而是您的編輯器的代碼完成。
我懷疑您正在使用VS Code 和Shoelace 提供的自定義資料。這就是告訴 VS Code 注冊的 Shoelace 元素的資訊，如果你打開，dist/vscode.html-custom-data.json你會看到每個標簽和可用屬性串列。
如果要擴展和重新標記 Shoelace 元素，則需要向 VS Code 提供自己的自定義資料。
幾點注意事項：
首先，當您 import 時components/button/button.js，您仍在注冊 Shoelace 按鈕。事實上，您的代碼同時注冊了兩者<sl-button>，<my-button>因為注冊發生在匯入時。
其次，鞋帶組件不是為重命名而構建的。許多人依靠標簽名稱來作業，例如期望哪個孩子成為孩子，哪個<sl-menu>期望孩子成為孩子。重命名它們會以意想不到的方式破壞事物。<sl-menu-item><sl-tab-group><sl-tab><sl-tab-panel>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445936.html
上一篇：類“TodosComponent”的引數“函式”沒有合適的注入令牌
下一篇：Angular材質匯入模塊