How to pass callbacks to custom element created with Svelte5 ?

[mulder999]

I wonder if it is possible to pass callbacks to custom element created with Svelte5 and if it is how ?

Basically I would like the equivalent of:

import { MyElement, mount } from './script/my-element.js';

const target = document.getElementById('my-element');

export const myElement = mount(MyElement, {
  target: target,
  props: {
    language: "fr",
    onClose: (b) => handleClose(b), // This receive a bool as parameter
    onModify: handleModify,
  }  
});

But using the custom WebComponents syntax <my-element language="fr" ?onClose?=?? ?onModify?=??></my-element>.

[brunnerh]

It is a bit unclear what you are trying to do here.

If the web component dispatches a Close event, then <my-element onClose={() => ...}> will handle said event. A CustomEvent can pass additional data via its detail. You cannot use callbacks when using names starting with on.

Don't declare properties or attributes starting with on, as their usage will be interpreted as an event listener. In other words, Svelte treats <custom-element oneworld={true}></custom-element> as customElement.addEventListener('eworld', true) (and not as customElement.oneworld = true)

For web components I would use regular events, that is the DOM-native way (Playground example).

You can use callback functions, but the custom element has to define a property for it. E.g.

<my-element close={data => alert(data)}></my-element>

export class MyElement extends HTMLElement {
  get close() {
    return this._close;
  }
  set close(value) {
    this._close = value;
  }

  // ..., in event listener:
  this.close?.('hello from my-element');
}

Playground

[mulder999]

Thanks for your reply. In fact, I was aiming to use a Svelte5 component from a vanilla HTML/JS setup and I do have control of both sides.

Reading the remark with on, I had the impression having an event listener was exactly what I needed.

[mulder999]

I finally discovered the $host function.

If it had been mentioned in the <svelte:options> or component options documentation, it would have saved me some time.

Here is how I support both customElement and Svelte component modes:

  function handleClose(withRefresh: boolean) {
    $host()?.dispatchEvent(new CustomEvent("onClose", {detail: withRefresh}));
    prop.onClose?.(withRefresh);
    closeModal();
  }