SuperAPI AI 工具集

svelte-special-elements

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:本技能面向 Svelte 5 模板中以 svelte: 为前缀的特殊元素,帮助处理错误边界、异步 pending 状态、窗口/文档/body 事件监听、动态标签渲染、head 注入与编译器选项配置。

主要能力:svelte:boundary(5.3+)隔离局部错误与异步状态,支持 pending、failed、onerror 三个属性;捕获渲染同步错误、$effect 错误与 await rejection,不捕获事件处理器或 setTimeout 中的错误。SSR 下默认无效,5.51+ 可在 render/mount/hydrate 传入 transformError 返回可 JSON 序列化对象。svelte:window 监听 window 事件并绑定 innerWidth、scrollX 等属性,scrollX/scrollY 是唯一可写绑定。svelte:document 监听 visibilitychange、selectionchange 等 document 事件。svelte:body 监听 mouseenter/mouseleave 并支持 use: action。svelte:head 向 document.head 注入 title、meta、link、style、JSON-LD,响应式更新且同种元素后者覆盖前者,SSR 时单独暴露 head。svelte:element 动态渲染标签,this 为 null 时不渲染,仅支持 bind:this。svelte:options 配置 runes、namespace、customElement、css 等。

使用方式:这些元素只能出现在组件顶层,不能放在 {#if} 等块内;svelte:options 须位于 script 之后、模板之前。

限制:svelte:element 不支持 bind:value 等元素特有绑定;boundary 的 pending 仅在初次渲染显示;高频事件建议节流防抖。具体示例与参考文件见资料所列 examples 与 references 目录。