如何在 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 组件? 的相关文章

  • JavaScript onTouch 不工作

    谁能告诉我为什么这个 onTouch 处理程序没有触发 var myDiv document getElementById existingContent var myButton a href log out a myDiv append
  • 主干视图 DOM 元素已删除

    我一直在阅读有关 Backbone js 僵尸 或内存泄漏 问题的信息 基本上 当您不再需要该元素时 您必须从 DOM 中解除绑定并删除该元素 以确保所有事件也被删除 现在 我有一个包含几个容器的单页应用程序 div div div div
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 如何重置使用 JavaScript 更改的 CSS 属性?

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 除了更改标题之外,如何在 Firefox 中强制另存为对话框?

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win

随机推荐

  • 如何在 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 但我不知