Question

将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 .chip填充插槽。不像conversational-select那样内联样式。似乎没有附加自己的事件侦听器。但是由于Svelte的transition:fade指令，似乎确实会创建淡入淡出过渡。

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

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

Answer 1

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

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

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

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

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

1 个答案: