Svelte 自定义元素 API
Svelte Custom element API
我对如何创建自定义元素有疑问API。我已遵循 documentation，但收到以下警告：
The 'tag' option is used when generating a custom element. Did you
forget the 'customElement: true' compile option? (Link.svelte: 1:16)
我在编译器选项中标记了 customElement: true。
我迷路了...有人可以帮助我吗？
看来 REPL 并不真正支持自定义元素。有点道理...
Svelte 中自定义元素的总体思路如下：
1。您设置 Svelte 编译选项 customElement: true
例如，在默认的 Rollup 模板中，您可以在 Rollup 的 Svelte 插件中设置此选项 here：
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。你可以随心所欲地编译/捆绑你的组件。
如果我们继续 Svelte official template for Rollup, then you'll end up with a generated bundle.js 文件的示例。
4。您将此 bundle.js 文件包含在 HTML page:
中
<script defer src='/build/bundle.js'></script>
5。现在，在此页面中，您可以使用上面定义的标签，就好像它们是原生 HTML 元素一样，例如 <div> 或 <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 自定义元素确实会受到影响 some limitations（链接部分的结尾） .
是否应该使用它们取决于您的用例。
而且，无论如何，您似乎无法在 REPL 中使用它们...
最后一件事...
因为我在这个答案中一直使用默认的 Svelte 模板，所以应该注意，如果你想将它与自定义元素一起使用，你应该 而不是 初始化 App 组件自己 main.js:
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 导入的文件是可以的。）
我对如何创建自定义元素有疑问API。我已遵循 documentation，但收到以下警告：
The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option? (Link.svelte: 1:16)
我在编译器选项中标记了 customElement: true。
我迷路了...有人可以帮助我吗？
看来 REPL 并不真正支持自定义元素。有点道理...
Svelte 中自定义元素的总体思路如下：
1。您设置 Svelte 编译选项 customElement: true
例如，在默认的 Rollup 模板中，您可以在 Rollup 的 Svelte 插件中设置此选项 here：
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。你可以随心所欲地编译/捆绑你的组件。
如果我们继续 Svelte official template for Rollup, then you'll end up with a generated bundle.js 文件的示例。
4。您将此 bundle.js 文件包含在 HTML page:
中
<script defer src='/build/bundle.js'></script>
5。现在，在此页面中，您可以使用上面定义的标签，就好像它们是原生 HTML 元素一样，例如 <div> 或 <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 自定义元素确实会受到影响 some limitations（链接部分的结尾） .
是否应该使用它们取决于您的用例。
而且，无论如何，您似乎无法在 REPL 中使用它们...
最后一件事...
因为我在这个答案中一直使用默认的 Svelte 模板，所以应该注意，如果你想将它与自定义元素一起使用，你应该 而不是 初始化 App 组件自己 main.js:
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 导入的文件是可以的。）