elements: compatibility with Svelte - attributes/properties not available on rerender

[lfleischmann]

Checklist

• I could not find a solution in the existing issues or docs.
• I agree to follow this project's Code of Conduct.

Describe the bug

Using the hanko-auth web component in a Svelte application causes issues when the component is rendered.

A detailed description of the issue can be found here.

There is also an open pull request in the preact-custom-element project that might solve the issue. We also commented on this PR including a mention of one of the maintainers.

Reproducing the bug

1. Checkout the branch feat-example-svelte
2. Start the required applications
   • a database (e.g. postgres, see config below)
   • a hanko backend ( + mailslurper)
   • the express backend
   • the svelte example
3. Open frontend location in browser
4. Create account/login
5. Logout
6. Observe error (see "Logs" below) in browser devtool console

Logs

element.hanko-auth.js:2 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'props')
    at o2.get (element.hanko-auth.js:2:22790)
    at set_custom_element_data (index.mjs:478:29)
    at Object.create [as c] (Login.svelte? [sm]:4:49)
    at create_component (index.mjs:1821:20)
    at Object.create [as c] (App.svelte? [sm]:4:39)
    at Object.create [as c] (Route.svelte:117:24)
    at Object.create [as c] (Route.svelte:106:26)
    at Object.create [as c] (Router.svelte:204:65)
    at create_component (index.mjs:1821:20)
    at Object.create [as c] (Route.svelte:117:24)

Configuration

database:
  user: hanko
  password: hanko
  host: localhost
  port: 5432
  dialect: postgres
passcode:
  email:
    from_address: [email protected]
  smtp:
    host: localhost
    port: 2500
secrets:
  keys:
    - abcedfghijklmnopqrstuvwxyz
service:
  name: Hanko Authentication Service
server:
  public:
    cors:
      enabled: true
      allow_credentials: true
      allow_origins:
        - "*"
webauthn:
  relying_party:
    origin: "http://localhost:8888"

Hanko Version

0.2.0

OS

macOS

OS Version

Monterey (12.6 (21G115))

Environment

Binary/Build & Run from Source

Additional Context

Not all "subprojects" have the "global" version indicated by the repo tag. The svelte example in the feat-example-svelte branch currently uses @teamhanko/hanko-elements version 0.0.8-alpha which in turn uses @teamhanko/hanko-frontend-sdk version 0.0.5-alpha.