Solid Elements don't work with Server Actions

[BleedingDev]

Describe the bug

Description

I'd like to use power of JSX + Server Actions with making universal Web Components running anywhere, so I decided to try Solid Elements and found that works only partially, so I prepared a small demo with the bug.

Your Example Website or App

https://stackblitz.com/edit/github-becvxn?file=src%2Fcomponents%2FTest.tsx

Steps to Reproduce the Bug or Issue

1. Open the app and wait to it to load
2. Wait for Web Components to load, you should see Button and Form twice (first as Web Component, second as Solid component)
3. Testing Button works correctly (it console.logs both on server and client)
4. Form works only in Solid. Web Component redirects to http://localhost:3000

Expected behavior

As a user I expected Web Component Form to work correctly with Server Actions, but instead I get redirect to http://localhost:3000.

Screenshots or Videos

solid_web_components.mp4

Platform

• OS: Windows
• Browser: Edge
• Version: 126.0.2592.24 (Official build) beta (64-bit)

Additional context

I tried both versions of Solid Elements, e.g. 1.8.0 and 2.0.0-beta.1.

[ryansolid]

Yeah I see the action being applied to form in the WC but it doesn't bubble up to the document where the event handler is. As far as I can tell it doesn't bubble past the WC boundary at all. I just did something pretty vanilla here and can see that behavior: https://playground.solidjs.com/anonymous/220074e6-57c4-4536-94c7-8210854c4a43

So this is a Web Component idiosyncrasy it looks like. Submit events aren't composable. This isn't restricted to our actions but our submit events in general as you can see click works but specifically submit does not.

How to address this though is trickier. It isn't going to work natively. And we rely on event delegation to get that API. So all I can think of is forwarding the event as a custom event. You could add this to the web component version of the form:

<form
    onSubmit={(e) => {
        if (e.detail === 'customsubmit') return;
        e.preventDefault();
        e.stopPropagation();
        const evt = new CustomEvent('submit', {
          bubbles: true,
          composed: true,
          cancelable: true,
          detail: 'customsubmit',
        });
        evt.submitter = e.submitter;
        e.target.dispatchEvent(evt);
      }}
 />

I believe this is a working example: https://stackblitz.com/edit/github-becvxn-w9pcrz?file=src%2Froutes%2Findex.tsx,src%2Fcomponents%2FForm.tsx

[ryansolid]

Given this is specifically about action API design and can't be solve by Solid compiler I'm going to transfer this to the router.