Skip to content

button: type=submit cannot submit its form before JavaScript runs (shadow DOM) #86

Description

@eddyloewen

Goal

A server-rendered `` inside a `

` submits that form without JavaScript, and before the element is upgraded.

Context

`el-button` renders its native `` in the shadow root and drives the owning form from a click handler (`form.requestSubmit()`). With Declarative Shadow DOM from `@webtides/element-js-ssr-renderer` the page looks complete before JS, but the inner button has no form owner across the shadow boundary, so a click does nothing, and implicit submission (Enter) finds no submit button in the form. Any form that must work without JS (progressive enhancement, SvelteKit form actions) has no submit path. Hit in loewen-digital/sveltekit-ai-starter-template (issue #7 there); the template renders a `` fallback button and hides the element under `@media (scripting: none)` until this is solved upstream.

Acceptance criteria

  • With scripting disabled, clicking a server-rendered `` submits the enclosing form.
  • Pressing Enter in a text field of that form submits it (implicit submission) without JS.
  • Behaviour with JS enabled is unchanged (`requestSubmit`, `disabled`/`loading` guards).

Proposal (non-binding)

Options seen so far: render the control in light DOM for `type="submit"|"reset"` (loses `part` styling for that case); or make the element form-associated (`static formAssociated = true`, `ElementInternals`) and document that the no-JS path still needs a light-DOM control; or emit a hidden light-DOM `

` as part of the SSR output. The first keeps the no-JS promise, the others do not.

Out of scope

Link mode (`href`), which already works without JS.

Activity

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