Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
winterkind opened this issue Jun 1, 2022 · 0 comments

Comments

@winterkind
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant