Custom element attribute reflection fails when a dash is present in the attribute

[willnationsdev]

Describe the bug

If I define an exported boolean property and configure it to be reflected back to the DOM, then it will work fine if you do not manipulate the attribute name. However, if the attribute name is modified to include a dash, then the reflection will only trigger once and then stop triggering afterward.

Reproduction

I would expect that every time I click the "Toggle" button to hide/show the inner div, then the my-element custom element would likewise toggle its aria-expanded attribute accordingly. Instead, it will appear after the first click and then stop toggling afterwards. This problem does not occur if I set attribute to "expanded" or leave it undefined.

<svelte:options customElement={{ tag: "my-element", props: {
  expanded: { reflect: true, type: 'Boolean', attribute: 'aria-expanded' }
}}} />

<script>
  export let expanded = false;
</script>

<div>
  <button on:click={() => expanded = !expanded}>Toggle</button>
  <div class:hidden={!expanded}>Hidden Text</div>
</div>

<style>
  .hidden {
    display: none;
  }
</style>

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i9-13900H
    Memory: 16.82 GB / 63.66 GB
  Binaries:
    Node: 20.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.6.6 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.9 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (115.0.1901.203)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    svelte: ^4.0.0 => 4.1.1

Severity

annoyance

[willnationsdev]

(Upon further investigation, it seems like the example is a bit poor since you need aria-expanded="true" to match accessibility concerns, not just aria-expanded; however, that bears no relevance to the buggy behavior itself which applies regardless)