Created attachment 469055 [details] Demonstration of :user-invalid and :user-valid with a form associated custom element (works in Firefox) `:user-invalid` and `:user-valid` do not work for form associated custom elements in Safari (or Chrome). It does work correctly in Firefox. I am able to trigger those pseudo-classes for a form associated custom element in Firefox when I make the form value of the element dirty with `ElementInternals.setFormValue()`, then either by setting or clearing a constraint violation with `ElementInternals.setValidity()`.
Chromium issue is here: https://bugs.chromium.org/p/chromium/issues/detail?id=1511887
It's not supposed to trigger for form associated custom elements according to the spec: https://html.spec.whatwg.org/#selector-user-valid There is a spec issue to change that though: https://github.com/whatwg/html/issues/9639 Firefox's implementation pre-dates the official specification for :user-valid/invalid.
<rdar://problem/120027003>