[Feature Request]: ElementInternals

[kernel-io]

The problem

I'd like to propose implementing ElementInternals on the existing form web components in this library to enable proper form association and native HTML form integration. Some benefits include:

• Built-in validation API integration
• Improved accessibility and semantic correctness
• Better alignment with web standards

Would the team be open to a PR implementing this enhancement?

This should be a backward-compatible change that significantly improves the developer experience when using these components in forms.

Thanks for considering!

The solution

From my initial testing this is a minor change with only a few extra lines per form component.

1. Add static formAssociated = true.
2. Assign this.attachInternals() to this.#internal in constructor.
3. Add a getter for the #internal.form property called form.
4. Call setFormValue on the value setter.
5. Add form lifecycle callbacks if needed (formResetCallback, formDisabledCallback, etc.)
6. Expose standard form control properties if needed (validity, validationMessage, etc.).

Examples

(example from tweaking the datepicker es module) - this is enough to have the element function nearly seamlessly with Phoenix LiveView - all that needs to be done then is trigger an 'input' event when the element emits a 'cds-date-picker-change' event.

Package

@carbon/web-components

Application/PAL

No response

Business priority

None

Available extra resources

I'm happy to perform the implementation.

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[kernel-io]

Basic implementation here which already greatly improves usage of the form elements in a normal form.

https://github.com/kernel-io/carbon/commit/786a18a26d06c1750e4abf66fa81ed99f74826e5

I think we could even drop our custom FormData implementation, as ElementInternals provides that for us.

[kernel-io]

Hi there, just wondering when this will be looked at, I'm happy to do the implementation.

[roberthmoller]

+1

[tay1orjones]

Hey, thanks for following up. This seems like a good addition but we're not at a place where we could take this on right now. If you'd like to put something together into a PR, we're happy to help review and land it.

[github-actions[bot]]

The Carbon team has accepted this proposal! Our team doesn't have the capacity to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!