为什么嵌套组件不呈现为可槽自定义元素？

Question

将Svelte组件作为自定义元素有限制吗？例如，我们能够嵌套组件吗？并填充那些嵌套组件中的插槽？

我在我较旧的Vue应用中使用Svelte组件作为自定义元素遇到麻烦。

我在这个简化的示例中有一个选择和模态组件：https：//svelte.dev/repl/4d4ad853f8a14c6aa14c6a27f6baf33751eb8？version = 3.6.4

然后，我将使用标准的frolup.config.js编译这些：

export default {
  input: "src/components.js",
  output: [
    // ...
    { file: "dist/index.min.js", format: "umd", name }
  ],
  plugins: [
    svelte({
      dev: !production,
      customElement: true,
      // ...
    }),
    resolve(),
    commonjs(),
    !production && livereload("public"),
    production && terser()
  ],
  // ...
};

然后我去使用自定义元素。单击<conversational-select>，我得到的标记看起来如下：

<conversational-select label="Domains" firstvaluelabel="All Domains">
    <!-- shadow-root -->
    <style>...</style>
    <span class="select" >
        <div class="select-value">Governance Board</div>
        <div class="select-label" ></div>
    </span>
    <!-- The below div is the appropriate markup for Modal but the style isn't inlined and isn't slotted.
    <!-- maybe because it didn't append as <sk-modal>?  -->
    <div ><slot></slot></div>
</conversational-select>

"模态"是一种渲染。但是它不会用span .chip s填充插槽。不会像conversational-select那样内联样式。似乎没有附带自己的活动听众。但是，由于Svelte的transition:fade指令，似乎确实创造了淡出的过渡。

我可以用一个香草html文件来复制它，所以这不是Vue的错。

我是用自定义元素打破了一些已知的规则，违背了Svelte的自定义元素汇编的局限性，或者只是在某个地方误认为？

Answer 1

i是已提到的Svelte Github问题的作者。我相信我在这里有一个修复。存在一些问题：

• slotted从未设置
• "嵌套"元素未正确添加

我希望Svelte的作者可以更改我的拉请请求，但是如果您想使用它，则可以：

• 克隆我的分支
• 运行npm && npm build && npm link
• 转到您的项目并运行npm link svelte