Svelte定制元素API [英] Svelte Custom element API
问题描述
我对如何创建自定义元素API有疑问。我已遵循documentation，但收到以下警告：
在生成自定义元素时使用‘tag’选项。你有没有 忘记‘stomElement：True’编译选项了吗？(Link.svelte：1：16)
我已在编译器选项中标记了stomElement：True。
我迷路了……有人能帮帮我吗？
REPL
因此，推荐答案似乎并不真正支持自定义元素。这有点道理...
Svelte中自定义元素的一般思想如下：
1.您设置了Svelte编译选项customElement: true
例如，在默认的汇总模板中，您可以在汇总的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的示例，那么您最终将得到一个生成的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模板，所以需要注意的是，如果您想将它与自定义元素一起使用，不要您应该在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导入的文件可以。)
这篇关于Svelte定制元素API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
