Svelte 5: Custom Element prop to attribute mapping inconsistent

[oladayo21]

Describe the bug

For custom elements where the props and attributes are defined with <svelte:options/>, there appears to be an inconsistency in how Svelte handles props-to-attributes mapping depending on how the props are accessed.

<svelte:options customElement={{
	tag:"ps-greet",
	props: {
		message: {attribute:"data-external-props-message"}
	}	
}} />

When accessing props directly:

let props = $props();
props.message; // undefined
props["data-external-props-message"]; // works, but requires using attribute name

When using destructuring:

let { message } = $props(); // works as expected

Correct me if I am wrong but I think props should be consistently accessible regardless of the method used to reference them, either through direct reference or destructuring.

Upon initial investigation, the issue seems to originate from here where the prop definition of the custom element is constructed based on the explicitly defined props of the component (see here). This worked in Svelte 4 because the props are always defined with export let message, however in svelte 5 where it is possible to define props like let props = $props(), properties will always be an empty array in this case.

Reproduction

REPL

Logs

No response

System Info

System:
    OS: macOS 14.6.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 58.38 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.local/state/fnm_multishells/69839_1729547059074/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.5.2 - ~/.local/state/fnm_multishells/69839_1729547059074/bin/npm
    pnpm: 9.11.0 - ~/.local/share/pnpm/pnpm
    bun: 1.1.29 - /opt/homebrew/bin/bun
  Browsers:
    Edge: 130.0.2849.46
    Safari: 18.0
  npmPackages:
    svelte: ^5.0.0 => 5.0.4

Severity

annoyance