Expose method from Svelte web component

Question

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

Answer 1

You try to create and to use the custom element from the same project, which I don't think can work. If you add the compiler option customElement: true, a bundle.js file will be created under public/build when building the project with npm run build. This file contains the custom elements and can then be copied, renamed and used in a different project.

Like mentioned in the comments it looks like you can't change the rollup.config file in the codesandbox. Besides you need access to the terminal to run the build. In the codesandbox docs two environments are mentioned Client & Container Environments The Svelte one seems to be a Client environment without a terminal. Maybe everything could be set up via a Container Environment, but I assume it would be better to switch to a locally installed IDE like Visual Studio Code

Here's a tutorial going trough the process of building web components.

There are basicily three steps

• add <svelte:options tag="my-custom-element" /> to top of Component you want to export
• add customElement: true to compiler options in rollup.config.js
• adjust main.js so that it contains only imports of the components you want to export as web components like import MyCustomElement from './MyCustomElement.svelte'; and nothing else

The exported function can be called on the custom element and unlike with Svelte Components

By default, custom elements are compiled with accessors: true, which means that any props are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).

Answer 2

Call to_excel function. Like this:

df.to_excel("file_name.xlxs")