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

【问题标题】：Why doesn't the nested component render as a slottable custom element?为什么嵌套组件不呈现为可插槽的自定义元素？
【发布时间】：2019-07-04 21:58:15
【问题描述】：

将 Svelte 组件编译为自定义元素是否有限制？例如，我们可以嵌套组件吗？并填充那些嵌套组件中的插槽？

在我的旧版 Vue 应用程序中使用 Svelte 组件作为自定义元素时遇到问题。

在这个简化的示例中，我有一个 Select 和一个 Modal 组件：https://svelte.dev/repl/4d4ad853f8a14c6aa27f6baf33751eb8?version=3.6.4

然后我用标准票价的 rollup.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 .chips 填补空缺。不像conversational-select 那样内联样式。似乎没有附加自己的事件侦听器。但由于 Svelte 的 transition:fade 指令，似乎确实创建了淡入淡出过渡。

我可以用一个普通的 html 文件来重现这个，所以这不是 Vue 的错。

我是在使用自定义元素打破了一些已知规则，违反了 Svelte 自定义元素编译的限制，还是只是在某个地方弄错了？

【问题讨论】：

可能与github.com/sveltejs/svelte/issues/3128有关吗？
@skyboyer 谢谢，我想你可能是对的。该问题的作者 cam-stitt 得出的结论反映了我的问题。当我在运行时通过浏览器控制台添加子自定义元素时，挂载方法运行和一切。将此定位为已知问题，我会接受您的问题作为迄今为止的最佳答案。
到目前为止，您找到任何解决方法了吗？

标签： custom-element svelte

【解决方案1】：

我是前面提到的 Svelte github 问题的作者。我相信我有一个修复here。存在一些问题：

slotted 从未设置过
“嵌套”元素未正确添加

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

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

【讨论】：