Skip to content

Svelte 4: $$props not working in customElement when setting properties with accessors #11289

Open
@ls-bit

Description

@ls-bit

Describe the bug

Given a custom element component:

<svelte:options
    customElement={{
        tag: null,
    }}
/>

<script>
	export let name;
</script>

<p>$$props: {JSON.stringify($$props)}</p>
<p>$$restProps: {JSON.stringify($$restProps)}</p>

$$props and $$restProps do work when setting properties with attributes:

<ce-test name="name" other="other"></ce-test>

// output:
// $$props: {"name":"name","other":"other"}
// $$restProps: {"other":"other"}

$$props and $$restProps do not work when setting undeclared properties with accessors. Undeclared properties are missing:

const customElement = document.createElement('ce-test');
customElement.name = 'name';
customElement.other = 'other';

// output:
// $$props: {"name":"name"}
// $$restProps: {}

Related to #5482, #5608

Reproduction

https://github.com/ls-bit/svelte-ce-bug

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
    Memory: 4.74 GB / 31.68 GB
  Binaries:
    Node: 18.20.2 - ~\AppData\Local\Volta\tools\image\node\18.20.2\node.EXE
    Yarn: 4.0.0-rc.42 - ~\AppData\Local\Volta\tools\image\yarn\4.0.0-rc.42\bin\yarn.CMD
    npm: 10.5.0 - ~\AppData\Local\Volta\tools\image\node\18.20.2\npm.CMD
    pnpm: 8.15.6 - C:\Program Files\Volta\pnpm.EXE
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: ^4.2.15 => 4.2.15

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions