SvelteElement attempts to redefine itself when reloading after HMR update

[lorrenbiffin]

Svelte's compiler attempts customElements.define(..) at the end of each generated SvelteElement when customElement: true and tag="tag-name" are set.

When used in an environment which uses HMR, this causes the following error:

hmr-client.js:218 [ESM-HMR] Hot Update Error DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "custom-element-example" has already been used with this registry

The "offending" line is here:

svelte/src/compiler/compile/render_dom/index.ts

Line 526 in d4f98fb

@_customElements.define("${component.tag}", ${name});

---

Reproduce:

1. Setup a new Svelte project with HMR. I've used Snowpack with @snowpack/svelte-plugin.
2. Set customElement: true in compiler options, like so:

// svelte.config.js
module.exports = {
  compilerOptions: {
    customElement: true,
  },
};

3. In a .svelte component file, add tag="tag-name" to svelte:options, like so:

<svelte:options tag="custom-element-example"/>

<div id="custom-element-example">
  Some content ..
</div>

4. Compile your project and run it in browser with console open.
5. Make a change and save it (to trigger an HMR update)
6. Observe console error.

---

Expected Behavior:

Svelte component should be recompiled and properly reregistered within the document scope.

[lorrenbiffin]

Quick note: This appears to be a common problem with custom elements and HMR in general. Reading for context:

1. https://dev.to/nicolalc/customelements-webcomponents-live-reload-2m3h
2. Updating Element Registration.  WICG/webcomponents#820
3. JavaScript bundlers, HMR and customElements.define() WICG/webcomponents#829
4. Cleaning up (undefining) custom elements? WICG/webcomponents#754

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed as it was previously marked as stale and saw no subsequent activity.