Skip to content

Issue with Svelte component wrapping web components and forwarding 1:n slots #7576

Description

@winterkind

Describe the bug

This is probably connected to #7428. I created a detailed REPL showing the issue and some findings, see below.

I am using a UI library based on web components. I wrap the web components into Svelte components so that I can stick to the "programming model" of Svelte in the application.

There is also a web component for tables, which includes two 1:n slots: columns for table columns and the default slot for table rows. When wrapping the respective web components (table, table column, ...) into Svelte components, the components for the table columns are rendered into the wrong slot.

I tried the workarounds from #7428 and #1689. The one using {...$$restProps} does not work, maybe because the columns slot is 1:n. And wrapping the components into <div> does not work because that breaks the rendering of the web components. See the linked REPL below for details.

The only way I could make this work so far was by not wrapping the web components for table and table columns into Svelte components but using the web components directly. That works but is not really what I want to do.

Is there any other workaround that lets me use the wrapped components?

Reproduction

Svelte REPL:
https://svelte.dev/repl/1e420a118cac4b53b52cba49a2b29f34?version=3.48.0

It includes:

  • A working example using the web components directly, without wrapping Svelte components.
  • Using the wrapping Svelte components with the incorrect output.
  • The two workarounds I tried, both failing.

Logs

No response

System Info

Svelte REPL, version 3.48.0

Severity

annoyance

Activity

  1. dummdidumm commented on Nov 2, 2024

    @dummdidumm
    Member

    The reproduction no longer works sadly. Closing under the assumption that this was fixed with the overhaul of Svelte web components in Svelte 4. If not, please open a new issue with an updated reproduction. Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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