Let Form-Associated Custom Elements match :required, :optional, and :autofill pseudo-selectors

[NickGard]

What is the issue with the HTML Standard?

The spec as currently written does not include Form-Associated Custom Elements from matching:

• :required
• :optional
• :autofill

Form-Associated Custom elements can match most of the other form-specific pseudo-selectors, like :disabled, :read-only, :read-write, :valid, and :invalid. Matching the rest of the form-specific pseudo-selectors would allow FA Custom Elements to behave more like their native counterparts.

[NickGard]

Also the :checked, :indeterminate, and :default pseudos.

[zcorpan]

What is the use case for each in combination with FACE?

[NickGard]

What is the use case for each in combination with FACE?

<style>
  :required {
    border-color: red;
  }
</style>

<form>
  <label for="name">Name</label>
  <input id="name" required>
  <label for="email">Email</label>
  <custom-email-input id="email" required></custom-email-input>
</form>

I would expect the border-color to show on both inputs but the selector won't match the FACE. It would be cumbersome and fragile to have to add :state(required) and/or :state(my-FACE-required) for every rule that should match :required.

[p-bakker]

Same usecase here: you'd want consumers of web components not having to know the details of how the web component was implemented, but just do what they normally do and things to 'just' work

So if they want to style all required form elements, that they can just use the :required pseudo-selector, instead of having to figure out for all the custom elements they might be using (now, but also in the future) how to properly target them using component-specific selectors