如何为Svelte组件构造函数传入slot？ctx读取错误解决

报错原因与修正方案 #

你遇到的错误是因为**$$slots的位置传错了**，它不属于props对象，而是组件构造函数选项的顶层属性；同时插槽内容的格式也不符合要求，需要是返回节点数组的函数。

修正后的代码 #

const target = document.querySelector("#target");
// 先保存目标元素的原始子节点，避免被Svelte接管后丢失
const defaultSlotNodes = Array.from(target.childNodes);
// 清空目标元素，让Svelte负责渲染组件内容
target.innerHTML = "";

// 正确的实例化写法
new MyBlock({
  target,
  // $$slots是顶层选项，和target、props同级
  $$slots: {
    // 默认插槽的值是返回节点数组的函数
    default: () => defaultSlotNodes
  }
});

关键细节说明 #

1. $$slots的位置：它是组件实例化配置的顶层字段，不能嵌套在props里，否则会触发内部ctx未定义的错误——因为Svelte会把props里的内容当作组件的属性处理，而$$slots是内部保留的插槽配置字段，不在属性处理逻辑里。
2. 插槽内容的格式：每个插槽的值必须是一个函数，Svelte会在组件渲染阶段调用这个函数来获取插槽内容。直接传childNodes会因为节点状态变化或内部处理逻辑要求导致错误，用函数包裹可以确保在正确时机获取节点。

关于new调用组件构造函数的文档说明 #

这种直接通过new实例化组件的方式是Svelte的客户端低级API，用于在非Svelte项目中嵌入组件，或者实现高级定制需求。官方文档中会明确以下核心配置选项：

• target：必填，指定组件挂载的DOM元素
• props：可选，传入组件对外暴露的属性（对应Svelte组件里export声明的变量）
• $$slots：可选，定义插槽内容，键为插槽名称（默认插槽用default），值为返回DOM节点/节点数组的函数
• $$scope：可选，用于组件间的作用域继承，一般场景不需要使用

内容的提问来源于stack exchange，提问作者Ginpei