Skip to content

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

Closed
@winterkind

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

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