如何在 Svelte 中使用 Web 组件？
我想使用 https://github.com/microsoft/vscode-webview 中的一些 Web 组件-ui-工具包。但我不知道如何在 Svelte 中使用它们，因为 svelte 将 Web 组件视为 svelte 组件。
当我尝试将它们用作时，
<script lang="ts">
import { Button } from "@vscode/webview-ui-toolkit"
</script>
<main>
<Button appearance="primary">Text</Button>
</main>
我收到此错误，
Element does not support attributes because type definitions are missing for this Svelte Component or element cannot be used as such.
Underlying error:
JSX element class does not support attributes because it does not have a '$$prop_def' property.ts(2607)
'Button' cannot be used as a JSX component.
Its instance type 'Button' is not a valid JSX element.
Property '$$prop_def' is missing in type 'Button' but required in type 'ElementClass'.
Possible causes:
- You use the instance type of a component where you should use the constructor type
- Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
import type { SvelteComponentTyped } from "svelte";
class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}ts(2786)
I want to use few web components from https://github.com/microsoft/vscode-webview-ui-toolkit. But I don't know to how to use them in Svelte as svelte treats the web components as svelte components.
When I try to use them as,
<script lang="ts">
import { Button } from "@vscode/webview-ui-toolkit"
</script>
<main>
<Button appearance="primary">Text</Button>
</main>
I get this error,
Element does not support attributes because type definitions are missing for this Svelte Component or element cannot be used as such.
Underlying error:
JSX element class does not support attributes because it does not have a '$prop_def' property.ts(2607)
'Button' cannot be used as a JSX component.
Its instance type 'Button' is not a valid JSX element.
Property '$prop_def' is missing in type 'Button' but required in type 'ElementClass'.
Possible causes:
- You use the instance type of a component where you should use the constructor type
- Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
import type { SvelteComponentTyped } from "svelte";
class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}ts(2786)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Button是一个自定义元素类，不应该像 Svelte 组件一样使用。您需要改用自定义元素标记，在本例中为您可能需要进行额外的设置来初始化 Web 组件 - 我不熟悉这个库。
Buttonis a custom element class, and should not be used like a Svelte component. You need to use the custom element tag instead, which in this case is<vscode-button>.There may be additional setup you have to do to initialize the web components - I'm not familiar with this library.