Problem with reflect prop on web components.

[ObiWanKenobi]

Describe the bug

I'm creating a web component library with svelte components. I use esbuild(^0.17.12) with svelte-preprocess(^5.0.4) with the customElement option.

const options = {
  splitting: false,
  outdir: 'output',
  bundle: true,
  format: 'iife',
  write: false,
  mainFields: ['svelte', 'browser', 'module', 'main'],
  entryPoints,
  logLevel: 'info',
  sourcemap: 'external',
  plugins: [
    sveltePlugin({
      preprocess: sveltePreprocess({
        postcss: {
          plugins: [tailwindcss, autoprefixer],
        },
      }),
      compilerOptions: { customElement: true },
    }),
    ...
}

I previously wrapped all my components and manually declared them to the browser without using customElements.
customElements.define( name, constructor, options );
But I thought I would give it a shot with the new svelte 4 update.

But I'm having problems with updating the props with the new setup.

This is how I declare the props for the components:

<svelte:options
  customElement={{
    tag: 'custom-button',
    props: {
      size: { reflect: true, type: 'String', attribute: 'size' },
      label: { reflect: true, type: 'String', attribute: 'label' },
    },
  }}
/>

<script lang="ts">
    export let size: 'normal' | 'small' | 'large' | 'xsmall' = 'normal';
    export let label: string = '';
    ...
</script>

I use the reflect prop. BUT when I change any given prop in the application that consumes the component nothing changes. Any ideas why?

Reproduction

See the code in the description.

Logs

No response

System Info

Svelte: ^4.0.0

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 475.58 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.6 - ~/.nvm/versions/node/v16.20.0/bin/npm
    pnpm: 8.6.5 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: 114.0.1823.58
    Safari: 16.5
  npmPackages:
    svelte: ^4.0.0 => 4.0.0

Severity

annoyance

[dummdidumm]

Could you be more specific? If I'm changing a prop from the outside that is reflected. What I'm seing though that when I'm changing a prop from inside the component the prop is on then that's not reflected - is that's what you mean?

[ObiWanKenobi]

Could you be more specific? If I'm changing a prop from the outside that is reflected. What I'm seing though that when I'm changing a prop from inside the component the prop is on then that's not reflected - is that's what you mean?

Sorry for the unclarity. I meant when I changed the prop from the actual consumer of the web component output.

I.e:

<custom-button size="WHEN I CHANGE THIS VALUE" />

[ObiWanKenobi]

I tested with the updated svelte version svelte@4.0.3. Now it works. Thanks for the fast response and update ❤️!