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

Form associated custom elements: cross shadow root form participation #1075

Open
christophe-g opened this issue Oct 6, 2024 · 0 comments
Open

Comments

@christophe-g
Copy link

Consider this:

  1. An element holding a textfield:
@customElement('my-wrapped-field')
export class MyWrappedField extends LitElement {
  @property() label!: string
  render() {
    return html`
        <md-filled-text-field .label=${this.label} required></md-filled-text-field>
        `;
    }
}
  1. Placed within a form
<form>
     <md-filled-text-field label="I participate to the form" required></md-filled-text-field>
     <my-wrapped-field label="I will not"></my-wrapped-field>
     <div>
        <md-filled-button>Submit</md-filled-button>
     </div>
<form>

The md-filled-text-field within the my-wrapped-field does not participate in the form (its .form is null) as it is not in the same shadow root.

Is there / will there be a way to pass the form to the my-wrapped-field so that such nested form participation construct could work?

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