The Svelte "customElement" feature is not production ready yet !

[sawden]

Describe the problem

I spent 2 weeks trying to port my project from setencil to svelte only to find out that the "customElement" feature is not ready for productive use at the current state.

Don't get me wrong svelte is a nice tool for a lot of projects but the "Web Component" feature is obviously experimental and that should be definitely mentioned in the docs to prevent frustrated developers.

Blocker Issues:

• Nested slots are never rendered | Nested Custom Element slots are never rendered #3128
• Nested components can't display styles | Nested child components lose their css when the parent is used as a custom element #4274
• :global(...) styles not working | :global(...) not working in custom elements #2969
• Transitions do not work in custom Elements | Transitions in custom Elements #1825
• Context API doesn't work | Context API doesn't work for custom elements #3422

Nice to have:

• Hyphenated properties not supported Allow hyphenated properties to be defined in a component #3852
• Storybook (@storybook/svelte) can't handle svelte web components out of the box
• Allow embedding styles in the DOM | Optionally embed styles in the DOM if the styles are in JS. #4039

Describe the proposed solution

Set the "customElement" feature in its current state as experimental.

Alternatives considered

Fix all essential bugs of the "customElement" feature.

Importance

i cannot use svelte without it

[vospascal]

having this merged would help #4330 controlling the shadow dom

[vospascal]

@sawden could you give an example of something you would wanted to make that now you can’t?

[sawden]

@sawden could you give an example of something you would wanted to make that now you can’t?

All "Blocker Issues" keep me away from building Web Components with svelte in its current state 🤐.

In my opinion, for example, nested slots are essential.

[vospascal]

Do you mean with nested slots a custom element inside a custom element inside a custom element an so on? Cause I think that works fine I don’t see a good example of what’s wrong in the issues

[michaelvogt]

Pretty sad to see such an important functionality being broken since mid 2019 (#3128), and to read here ' I think that works fine'.

[michaelvogt]

So, here is an absolute minimum project that shows the problem I have. I believe it's the same problem @sawden is talking about.
https://svelte.dev/repl/d0b434ffcc25445e959736b64ab535bf?version=3.41.0

Output is shown when compiled with customElement: false, output is empty with customElement: true.

As it seems that the REPL doesn't set the parameter correctly, output is shown there either way - with the same html. So you need to export the sources and set the parameter manually and add the custom element to the index.html, which is <bugslot-app></bugslot-app>

A real world module that shows the problem is for example https://github.com/buhrmi/thumb-ui

[michaelvogt]

Quick update:

I managed to get the expected output by changing the createFragment function as shown below. Problem is, I don't find the place in the Svelte code to get Svelte compile the application code accordingly. Any hints are welcome.

` function create_fragment$1(ctx) {
let slot = create_default_slot(ctx);

    const block = {
        c: function create() {
            // slot = element("slot");
            // slot.textContent = "default";
            slot.c();

            this.c = noop;
            add_location(slot, file$1, 2, 0, 41);
        },
        m: function mount(target, anchor) {
            // insert_dev(target, slot, anchor);
            slot.m(target, anchor);
        },
       ...

`

[LBrian]

Same here, I have a Svelte side project using 3.35.0 6 months ago experienced this issue and horrible DX (sorry I have to say that), even though I still believe Svelte has great potential among modern JS frameworks. 6 months later now I thought Sveltekit gonna be different but unfortunately still the same horrible which makes me feel sad.

I'm an active open source contributor (blitz.js and redwood.js) and happy to help and contribute but the first thing the core team need to do is update and polish the documentation in order to let ppl to jump in to help. I have to say Svelte's documentation is all about happy cases, lake of important information, my personal experience of using Svelte in the past 6 months is 80% time googling answers coz neither in the document nor easy to debug in the source code. I really recommend the core team to check out RedwoodJS's documentation and their CLI, by far the best DX ever for me.

[antony]

This issue has gone a bit off topic, and offers nothing in itself, thus I will close it in favour of all the issues that it links.

Nobody on the core maintainers team is particularly fond of Web Components, and thus there is limited desire to prioritise the issues which set out to provide support further than what currently exists.

If you want to champion web components, then please go ahead and contribute to the open issues by way of PRs, etc, and we will see that these features are added to core.

[woodyrew]

Nobody on the core maintainers team is particularly fond of Web Components, and thus there is limited desire to prioritise the issues which set out to provide support further than what currently exists.

I find this to be quite disapointing. What are the issues the core team have with Web Components that are stunting support? Rich has always been critcal of Web Components, why support them at all?

The killer feature for me is the ability to incrementally improve and standardise UIs with Web Components and that's difficult to do in an agnostic way without them as far as I'm aware. GitHub's adoption story is a great example of this. Svelte is by far the nicest way to write components —be those native or Web Components— as attested by Stack Overflow's 2021 Developer Survey.

If this is the wrong place, please direct me accordingly please.

[tnzk]

@woodyrew

I'm working on a project whose deliverable are web components in Svelte so am keenly interested in contributing this way and make improvements to Svelte's web components support. Still in preparation but if by any chance we can work together feel free to contact me (of course others reading this are welcome :)

[michaelvogt]

I'm happy to help to improve the situation regarding web component support. But I fail to understand how to make the necessary changes to the compiler , unfortunately😒

[vospascal]

Loads of project now use vue because of this being able to “”compile”” to webcomponents and supported but that kinda sucks cause vue is big to package with every component I think svelte would be perfect for this also svelte has a nicer api overal

[ivanhofer]

If you are using web components because of it's encapsulation you maybe want to compile your svelte app normally and just use a shadowRoot as a target. This feature was mergen a few months ago: #5870

[patricknelson]

FWIW, a few of the blockers mentioned here (which are still not yet implemented in Svelte itself) are now implemented in svelte-retag, namely:

• Nested slots (both light DOM and shadow DOM)
• Context support (see demo)

Also, beyond that:

• Lit-style attributes/properties (not hyphenated, but went this direction since that’s the approach Svelte 4 went with Custom element support). Although Svelte’s syntax for defining custom attribute mappings is on my roadmap (if you still wanted hyphens).
• DX: Also note that svelte-retag works reasonably well with Vite’s HMR, so that helps to bump DX quite a bit too (working around Using customElements.define() is not possible in v4 #8681).

Among other features. Anyway, figured this might be worth a look for folks still wanting to use these features with Svelte-based custom elements. LMK if you find any issues since I’m actively using this in prod myself (and plan on supporting it). 😊