Errors for form related controls

I've been meaning to file this issue as we do need a resolution to this prior to <selectlist> shipping. HTML has a few capabilities to enable client-side validation upon form submission; such as the required attribute. UAs have full control over the anatomy and rendering since like most UI this is not standardized anywhere. For example here are a few renderings when submitted a form that is required.

A solution to this will warrant its own explainer, so that is not the goal of this issue; the purpose of this issue is to answer the following question:

Is the error related to client-side validation a part of the anatomy of the control that owns the given attribute.

To provide a concrete example, let's use <selectlist> with a straw proposal for an <error> element:

<selectlist required>
   ... rest of anatomy here ...
   <requirederror>This field is required</requirederror>
   <patternerror>The field does not match the given pattern</patternerror><!-- this won't fire in this scenario since a pattern wasn't set -->
</selectlist>

I'm personally leaning towards doing a binding solution akin to the popover API and as I noted a research document will need to be created to influence the solution but that provides the following:

1. It doesn't block <selectlist> due to potential backwards compat issues
2. It allows scenarios where it isn't a part of the anatomy but is positioned relative to the offending field (another need for anchor-position)
3. Universal "stamping" of solutions rather than needing to replicate it for every HTML element

Start with the issue's example and compare the proposed anatomy approach with the popover API and anchor-position options. Research how client-side validation errors relate to form controls, then capture the resolution in the requested explainer or research document; done means the ownership or binding question is answered without blocking .