Why have custom validation styles?

[jasonchrista]

Form-associated custom element already use the browser's built-in pseudo classes for validation (except for user-valid and user-invalid). Why would someone want to use wa-input[data-wa-invalid] over wa-input:invalid? Also, it may hide the fact that you can do things like form:has(:invalid) { border-color: red' } when using these components. Lastly, if you are trying to simulate user-valid and user-invalid, it would be much better to add the attribute aria-invalid to the form control.

[KonnorRogers]

Why would someone want to use wa-input[data-wa-invalid] over wa-input:invalid?

You probably wouldn't for that case.

But you may want to do:

[data-wa-invalid] {}

as an easier way to style only invalid Web Awesome form controls and not affect any regular form controls on the page.

I try to think of the [data-*] attributes more as a fallback than as the primary way to do things.

Also, it may hide the fact that you can do things like form:has(:invalid) { border-color: red; }

We're definitely going to work on documenting cases like this. You could also do: form:has([data-wa-invalid]) { border-color: red; } to only target web awesome elements.

Lastly, if you are trying to simulate user-valid and user-invalid, it would be much better to add the attribute aria-invalid to the form control.

Not sure what this would afford us. I tested it out in VoiceOver and aria-invalid ends up doing nothing on the host element since it delegated to an internally focused element to get read unfortunately :/

EDIT: Also, the [data-*] attributes are fallbacks for :state(user-invalid), css custom states are what we plan to use for user-invalid / user-valid since every browser has differing opinions even on native form controls what constitutes user-invalid / user-valid.

I wish there was an aria-userinvalid 🤔 We can definitely re-evaluate in the future as browser / screenreader for these APIs change.

[jasonchrista]

The reason I like aria-invalid="true" is if you do a full server submission and there is an error, the form is usually re-rendered with all user submitted values but the non-validating ones have aria-invalid="true" on them. This makes it easy to apply styles .Form-group:has([aria-invalid="true"]) { color: red; }. It is unfortunate screen readers don't behave well in that use case when it comes to custom elements.