Svelte 自定义元素 API

Question

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

生成自定义元素时使用 'tag' 选项。您是否忘记了 'customElement: true' 编译选项？(Link.svelte: 1:16)

复制代码

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

我迷路了……有人可以帮助我吗？

Answer 1

所以看起来 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 页面中：

<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>

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

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

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

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

<script>
  export let name
</script>

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

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

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

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

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

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

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

而且，无论如何，您似乎无法在 REPL 中使用它们...

最后一件事...

由于我使用的默认模板斯维尔特一直以来这个答案，应该注意的是，如果你想使用自定义元素使用它，你应该不初始化App自己分量main.js：

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

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

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