从Svelte Web组件中揭示方法

发布于 2025-01-30 14:49:41 字数 975 浏览 3 评论 0 原文

我想拥有一种从Svelte Web组件中暴露的方法，以便组件的消费者可以称呼它。

假设我在这里有一个简单的Svelte Web组件：

<script>
    export function someMethod() {
      console.log("I was called");
    }
</script>

<svelte:options tag="svelte-div" />

<style>
    div {
      background: #ff3e00;
    }
</style>

<div>
  I am just a placeholder
</div>

一些不可知论的消费者应该能够调用该方法。可能是苗条的，可能是香草，可能是反应。像这样：

  const svelteDiv = document.querySelector("svelte-div");
  if (svelteDiv) svelteDiv.someMethod();

Svelte的 compileroptions：True 已设置。

上述作品完美无缺，我认为与Svelte一起也可以做到这一点。我的计算机上的构建文件还包括必要的 customElements.define 行，但我无法在DOM节点上调用此方法。我在文档中找不到任何东西。下面是上面设置的沙箱。

https://codesandbox.io/s/codesandbox.io/s/s/vigorof-euler-euler-euler-jp9ejd ？file =/app.svelte

原文

I'd like to have a method exposed from a Svelte web component so that consumers of the component may call it.

Say I have a simple Svelte web component here:

<script>
    export function someMethod() {
      console.log("I was called");
    }
</script>

<svelte:options tag="svelte-div" />

<style>
    div {
      background: #ff3e00;
    }
</style>

<div>
  I am just a placeholder
</div>

And some agnostic consumer should be able to call that method. Could be Svelte, could be vanilla, could be React. Like this:

  const svelteDiv = document.querySelector("svelte-div");
  if (svelteDiv) svelteDiv.someMethod();

Svelte's compilerOptions: true is set.

The above works flawlessly in stencilJS and I thought this must be possible with Svelte, too. The build files on my machine also include the necessary customElements.define lines and yet I can't call this method on the DOM node. I can't find anything in the docs. Below is a sandbox of the setup above.

https://codesandbox.io/s/vigorous-euler-jp9ejd?file=/App.svelte

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寄与心 2025-02-06 14:49:41

您尝试创建并使用同一项目的自定义元素，我认为这无法正常工作。如果添加了编译器选项 customElement：true ， bundle.js 将在 public> public/build/build 使用 npm run build 。该文件包含自定义元素，然后可以在另一个项目中复制，重命名和使用。

如评论中所述，看起来您无法更改codesandbox中的 lollup.config 文件。此外，您还需要访问终端才能运行构建。在CodesandBox文档中，提到了两个环境 client＆amp;容器环境 Svelte One似乎是没有终端的客户环境。也许一切都可以通过容器环境设置，但是我认为最好切换到本地安装的IDE，例如

这是教程 Web组件。

基本上有三个步骤

添加＆lt; svelte：options tag =“ my-custom-element”/＆gt; 您要导出要导出的组件顶部
添加添加 code> customelement：true to to to编译器选项 lolup.config.js
调整 main.js ，因此它仅包含要导出的组件的导入，要导出为Web组件，例如从' ./mycustomelement.svelte'; ，而其他任何东西都

无法在自定义元素上调用，与Svelte组件不同