如何在 Svelte 中使用 Web 组件?

2024-01-14

我想使用一些网络组件https://github.com/microsoft/vscode-webview-ui-toolkit https://github.com/microsoft/vscode-webview-ui-toolkit。但我不知道如何在 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)

Button是一个自定义元素类,不应该像 Svelte 组件一样使用。您需要改用自定义元素标签,在本例中是<vscode-button>.

<main>
  <vscode-button appearance="primary">Text</vscode-button>
</main>

您可能需要进行额外的设置来初始化 Web 组件 - 我不熟悉这个库。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Svelte 中使用 Web 组件? 的相关文章

  • angularjs:如何向资源对象添加缓存?

    在 http 中添加缓存非常简单 通过传递cache true http docs angularjs org api ng http https docs angularjs org api ng service 24http有缓存选项
  • 我如何在 AngularJS 中监听点击并按住的情况?

    我制作了一个时间计数器 您可以通过单击按钮来增加或减少时间 然而 我希望当我单击并按住按钮时 时间的价值会不断攀升 所以目前如果你看到我的Plunkr http plnkr co edit BxX9x5zYFMXVqt5JsN1F p pr
  • chrome 调试器承诺在暂停时不会解析?

    也许我没有正确调试承诺 但基本上 如果您在断点处停止并运行异步代码 它实际上不会完成 直到您恢复执行为止 这是一个问题 调试器允许您快速试验多个 api 方法 但如果您恢复它 您就不能 debugger now type the follo
  • 如何将udp发送到udp node.js服务器?

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js
  • 动态速度计 javascript 或 jquery 插件

    我希望有动态ajax插件在页面上显示速度计 一个想法是我设置一个背景并旋转针 有人知道相关插件吗 这里有一些供您参考 http bernii github com gauge js http bernii github com gauge
  • 如何使用 JavaScript 中的值填充下拉列表?

    我在 Tridion CMS 扩展中的功能区工具栏按钮中添加了一个按钮 单击该按钮后 将显示一个弹出页面 其中包含两个下拉菜单 通过更改第一个下拉控件中的值 我应该填充第二个下拉控件的值 就我而言 我正在使用ASP drop down li
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • javascript中按tab键时如何调用函数?

    我有一个这样的功能 function whenEmpty field if field value field style backgroundColor ffcccc alert Please fill the field field f
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • 如何在jquery中获取保存时间和当前时间的差异?

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 如何在打字稿文件中导入没有定义文件的js库

    随着我们的项目变得越来越大 我想从 JavaScript 切换到 TypeScript 以帮助进行代码管理 然而 我们使用许多库作为 amd 模块 我们不想将其转换为 TypeScript 我们仍然想将它们导入 TypeScript 文件
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式

随机推荐

  • 如何在 Entity Framework 5 Code First 迁移中重命名数据库列而不丢失数据?

    我使用 EF 5 0 Code First 迁移成功运行了默认的 ASP NET MVC 4 模板 但是 当我更新模型属性名称时 EF 5 0 会删除相应的表列数据 是否可以在不以自动方式删除数据的情况下重命名表列 手动编辑迁移的Up和Do
  • 如何使用 EF6 删除 1,000 行?

    我正在使用实体框架 6 我有一个包含测试信息的表 称为 测试 我正在删除 通过首先获取测试列表 执行以下操作从该表中获取行 每个删除然后提交 var testList testService GetTests 1 userId ToList
  • 如何在 Numba 中使用指针包装 CFFI 函数

    这应该是一项简单的任务 但我找不到如何将标量值的指针传递给 Numba 函数内的 CFFI 函数的方法 使用以下命令将指针传递给数组可以毫无问题ffi from buffer 示例函数 import cffi ffi cffi FFI de
  • 将两个字节读入一个整数?

    我有一个byte 我已经从文件中读取了 并且我想要得到一个int从其中的两个字节 这是一个例子 byte bytes new byte byte 0x00 byte 0x2F byte 0x01 byte 0x10 byte 0x6F in
  • 正在使用的 Azure 应用服务部署文件

    在我的项目中 我们使用 Azure App Service Deploy 任务来部署我们的 webdeploy 包 我注意到有时在部署时会出现文件使用错误 即使已设置 使应用程序离线 选项也是如此 解决这个问题的最佳方法是什么 这是错误 2
  • 为什么硬件加速在我的视图上不起作用?

    我在用着Facebook 的 Rebound 库 http facebook github io rebound 复制聊天头实现中看到的弹性动画 问题是 大多数时候动画都会断断续续 几张图片会更好地解释这一点 这是黄油般流畅的聊天头动画 这
  • 为 AWS Device Farm 构建 XCTest UI 测试

    我正在尝试设置我们的 iOS XCUITests 以在 AWS Device Farm 上运行 但似乎无论我如何构建和上传它们 测试都不会运行 它们在 XCode 本地运行时执行并通过 但不在 AWS Device Farm 上运行 我已经
  • 配置 Quartz.Net 使用 NLog 写入单独的文件

    这是我的 nlog 配置 我想要实现的是将 Quartz 日志放在单独的文件中 但检查日志文件夹我只发现调度程序日志文件
  • 如何强制对 xml 文件进行配置转换?

    我刚刚安装了配置转换 https marketplace visualstudio com items itemName GolanAvraham ConfigurationTransform对于VS2017 希望能转换一些XML文件 不幸
  • 在 XCode 4.2 空应用程序模板中使用 Interface Builder 将 tabbarcontroller 添加到 AppDelegate 的步骤

    当我被困住的时候在这个问题上 https stackoverflow com questions 8200059 tab bar is shifted down outside the borders of the simulator我找不
  • Python:将 1,000,000 个整数写入文件

    使用 Python 将 1 000 000 个整数 0 1 2 写入文件而无需压缩等的最紧凑方法是什么 我的答案是 使用 struct 模块 1 000 000 3 字节 但面试官似乎期望另一个答案 编辑 从 1 到 1 000 000 的
  • 带变换的 R lm() 公式的格式

    我不太清楚如何在一行中执行以下操作 data attenu x temp attenu accel 1 4 y temp log attenu dist best line lm y temp x temp 由于上述工作有效 我认为我可以执
  • 将 Arduino RGB LED 从一种颜色渐变为另一种颜色?

    目前 我已成功让 LED 灯循环显示我选择的八种颜色 一切都工作正常 除了我想要一种更自然的感觉 并且想要从一种颜色褪色 过渡到下一种颜色 而不是让它们互相替换 到目前为止 这是我的代码 int redPin 11 int greenPin
  • 子元素自动宽度(大于父元素)

    我有一个ul等距导航菜单inline block每个元素都有一个子菜单 问题是我无法让子菜单的宽度适应子元素的长度 它继承了父级的宽度 我可以设置固定宽度 但由于每个子菜单都有不同长度的不同链接 因此我理想地希望每个子菜单都具有自动宽度并与
  • Liquibase 不会使用 MySQL 回滚失败的变更集

    我使用 Liquibase 3 4 1 和 MySQL56 并通过 Spring Boot 运行 Liquibase 我有一个变更集 其中包括向现有表添加一列 新的column has valueComputed属性与一个简单的选择 当我在
  • 请求 EMV 卡的 GPO 命令时出现解析器错误

    我在使用 VISA 卡的 GET PROCESSING OPTIONS GPO 命令时遇到一些问题 以下是我对 VISA 应用程序的 SELECT 命令的响应 6F408407A0000000031010A535500A5649534120
  • ngrx/store 不显示表单的更新值

    我需要通过表单输入 2 个输入值 以兆字节为单位显示存储空间的使用情况 已使用空间和剩余空间 并显示来自 ngrx Store 的输入值 每次提交表单时 都会显示新值并更新旧值 问题是 UI 始终显示 used space 和剩余空间 的默
  • 带引导程序的滑出面板

    我使用 twitter bootstrap 并尝试做类似的事情here http codepen io Tyriar pen nJGfj 滑出面板 我见过nav collapse效果非常相似 只是它从上方下降并且仅出现在特定屏幕尺寸下方 希
  • React Native - 如何仅输入数字键盘(不带标点符号)

    有没有一种方法可以在没有标点符号的情况下键入数字键盘
  • 如何在 Svelte 中使用 Web 组件?

    我想使用一些网络组件https github com microsoft vscode webview ui toolkit https github com microsoft vscode webview ui toolkit 但我不知