3

我对如何创建自定义元素 API 有疑问。我已按照文档进行操作，但收到以下警告：

生成自定义元素时使用“标签”选项。您是否忘记了“customElement：true”编译选项？（Link.svelte：1:16）

REPL

我在编译器选项中标记了 customElement: true 。

我迷路了……有人能帮帮我吗？

4

1 回答 1

25

因此，REPL 似乎并不真正支持自定义元素。有点意思。。。

Svelte 中自定义元素的总体思路如下：

1. 你设置 Svelte 编译选项customElement: true

例如，在默认的 Rollup 模板中，您可以在 Rollup 的 Svelte 插件中设置此选项：

  plugins: [
    svelte({
      compilerOptions: {
        customElement: true,
        ...
      }
      ...
    }),
    ...
  ]

2. 你添加<svelte:options tag="what-ever" />到你的 Svelte 组件

<svelte:options tag="what-ever" />

<script>
  // make sure component Foo is available, but we don't import
  // it... we'll use it with it's tag <my-foo /> (see bellow)
  import './Foo.svelte'
  export let name = 'World'
</script>

<p>Hello, {name}!</p>

<my-foo {name} />

<style>
 p { color: skyblue; }
</style>

Foo.svelte

<svelte:options tag="my-foo" />

<script>
  export let name
</script>

<p>I am {name}</p>

请注意，您不能将自定义元素组件与普通组件混合和匹配。

这意味着您必须将tag选项添加到所有子组件，而不是像往常一样导入组件，您将直接在标记中使用它们的标签名称。

您仍然需要导入文件以使组件可用（但导入为空，例如import './Foo.svelte'）。

3. 您可以根据需要编译/捆绑您的组件。

如果我们继续使用Rollup 的 Svelte 官方模板示例，那么您最终会得到一个生成的bundle.js文件。

4. 您将此bundle.js文件包含在HTML 页面中：

<script defer src='/build/bundle.js'></script>

5. 现在，在这个页面中，您可以使用上面定义的标签，就好像它们是原生 HTML 元素一样，例如<div>or <strong>。

它们将作为 Svelte 组件实现，但在这个阶段，这现在是一个实现细节。

因此，例如，在此页面中，您现在可以执行以下操作：

document.body.querySelector('#container').innerHTML = '<what-ever>Foo</what-ever>'

或者，您可以在 HTML 中包含它（例如，在index.html默认模板的文件中）：

<body>
  <what-ever>foo</what-ever>
</body>

就是这样。在某些情况下，这可能很花哨，或者非常方便。您可以在平滑的声明性框架中实现自定义元素，您可以在任何上下文中使用（只要您可以导入.js文件），由于框架本身的开销最小。

如果您想将它作为一个小部件包含在 Wordpress 博客上而不是使用 jQuery，或者即使您想发布一个与框架无关的组件，那就太好了。

现在，如果您的整个应用程序都将基于 Svelte，它会失去很多盐分，因为与常规 Svelte 组件相比，Svelte 自定义元素确实受到一些限制（链接部分结束）。

您是否应该使用它们取决于您的用例。

而且，无论如何，您似乎无法在REPL中与他们一起玩...

最后一件事...

由于我在这个答案中一直使用默认的 Svelte 模板，所以应该注意，如果你想将它与自定义元素一起使用，你不应该在main.js中自己初始化App组件：

import App from './App.svelte';

// NOT needed with custom elements
//const app = new App({
//  target: document.body,
//  props: {
//      name: 'world'
//  }
//});

export default app;

入口点现在将是您使用上述技术创建的单个自定义元素。

但是您仍然应该确保您的所有自定义元素.svelte文件都由输入到 Rollup 的入口点（在这种情况下）导入，否则它们在生成的最终文件main.js中将不可用。bundle.js（在导入的文件中导入main.js很好。）

于 2020-03-04T16:44:07.370 回答