Let Form-Associated Custom Elements match :required, :optional, and :autofill pseudo-selectors about html HOT 4 OPEN

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

from html.

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

from html.

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.

from html.

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

from html.