Skip to content

Dynamic components with css variables passed does not render when component changes #16115

@ampled

Description

@ampled

Describe the bug

Using Custom Properties with dynamic components like this:

 <selected.component --color={'#fafafa'} />

...seems to break if the dynamic component changes.

Checking devtools the component does not render at all, but I tried adding a console.log to the dynamic component, and the message appeared in console. Otherwise, there are no error messages or warnings.

This is easy to work around using wrappers or key-blocks, but I wanted to raise this issue in case this is meant to be supported.

Reproduction

I modified the existing playground example for dynamic components and came up with this repro:

https://svelte.dev/playground/1ed049cacb034a06bfa6aed5ac7bbd53?version=5.33.18

Logs

System Info

REPL

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @ampled@elliott-with-the-longest-name-on-github

      Issue actions

        Dynamic components with css variables passed does not render when component changes · Issue #16115 · sveltejs/svelte