使用Svelte客户端组件API创建组件时能否访问及替换插槽？

Svelte 不支持你示例中两种直接操作slot的写法：new Component() 构造参数没有顶层的slot配置项，组件实例也不存在可直接赋值修改的slot属性，不管是创建阶段直接传slot参数、还是创建后给实例的slot属性赋值，都无法实现插槽替换。

正确实现方式 #

1. 创建组件时传入插槽内容 #

命令式实例化组件时，所有插槽内容需要通过props字段传递：

• 默认插槽对应props中的children字段
• 具名插槽对应props中与插槽名同名的字段
  可传入的内容包括原生DOM节点、DocumentFragment实例、已经挂载好内容的DOM容器。
  示例代码：

export default function (node: HTMLElement) {
  // 先创建插槽内容容器，实例化要放入插槽的组件
  const slotFragment = document.createDocumentFragment();
  const slotComponent = new AnotherComponent({
    target: slotFragment
  });

  const component = new Component({
    target: node,
    props: {
      // 默认插槽传children，具名插槽直接写对应插槽名即可，比如 content: slotFragment
      children: slotFragment
    }
  });

  return {
    update() {},
    destroy() {
      // 插槽组件需要手动销毁，避免内存泄漏
      slotComponent.$destroy();
      component.$destroy();
    }
  };
}

2. 创建完成后动态替换插槽 #

组件实例创建完成后，不需要重新实例化主组件就能替换插槽内容，常用实现方案是预留独立的插槽锚点节点，所有插槽内容都挂载到这个锚点下，替换时只需要操作锚点内的内容即可：

export default function (node: HTMLElement) {
  // 创建独立的插槽锚点容器
  const slotAnchor = document.createElement('div');
  let activeSlotComponent: SvelteComponent | null = null;

  // 封装插槽挂载/替换逻辑
  const replaceSlot = (SlotComponent: typeof SvelteComponent) => {
    if (activeSlotComponent) activeSlotComponent.$destroy();
    slotAnchor.innerHTML = '';
    activeSlotComponent = new SlotComponent({
      target: slotAnchor
    });
  };

  // 初始化默认插槽内容
  replaceSlot(AnotherComponent);

  const component = new Component({
    target: node,
    props: {
      children: slotAnchor
    }
  });

  return {
    // 接收新的组件构造函数即可动态替换插槽
    update(newSlot?: typeof SvelteComponent) {
      if (newSlot) replaceSlot(newSlot);
    },
    destroy() {
      activeSlotComponent?.$destroy();
      component.$destroy();
    }
  };
}

注意：所有手动命令式实例化的Svelte组件，都需要在不需要时主动调用$destroy()方法，避免残留事件监听、响应式订阅造成内存泄漏。

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