reportValidity() failure with form-associated customElement - custom-element

Question

I have a form-associated customElement which manages its own validity and validation messages. It works as expected as a member of a form; calling form.reportValidity() will place the appropriate error message on the appropriate anchor element. However, calling customElement.reportValidity() results in the error: An invalid form control with name='' is not focusable.
My understanding of reportValidity() is that we can call it on individual elements, whether it is a member of an HTMLFormControlsCollection or not. For example, you can call report validity on the following orphan input:
document.querySelector("#foo").reportValidity();
<input id="foo" value="" required>
So because the above works, I don't believe I'm out of line with any design principle.
My minimal repro sets up a form associted custom element by calling attachInternals and building a shadowDom of a single input element. A single instance of this custom element is nested within a form element. The page loads, and calls reportValidity on both the form and the custom element. The call on the custom element fails:
class FACE extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.attachShadow({mode:"open"});
this._internals = this.attachInternals();
}
connectedCallback() {
this.shadowRoot.innerHTML = `<input id="foo" value="initial">`;
let errorAnchor = this.shadowRoot.querySelector("#foo");
this._internals.setValidity({badInput: true}, "Some error message", errorAnchor);
}
reportValidity() { // expose reportValidity on the CE's surface
return this._internals.reportValidity();
}
}
customElements.define("fa-ce", FACE);
customElements.whenDefined("fa-ce").then(
() => {
// reports custom validation message
document.querySelector("form").reportValidity();
// "An invalid form control with name='' is not focusable."
document.querySelector("fa-ce").reportValidity();
}
);
<form>
<fa-ce></fa-ce>
</form>
So (most probable) I'm doing something wrong and you might could help, or this is a bug in (Chrome's) custom elements (FF hasn't implemented attachInternals yet), or this is as designed and what I'm trying to do can't be done.

Answer 1

update There now is a Bug reported:
https://bugs.chromium.org/p/chromium/issues/detail?id=1139621&q=%22not%20focusable%22&can=2
This answer might no longer be valid.
You need to make the Form Element inside shadowDOM focusable
when you create the shadowDOM:
this.attachShadow({
mode: "open",
delegatesFocus: true
});
Does not seem to work in a SO snippet...
working JSFiddle at: https://jsfiddle.net/WebComponents/9uq15ndr/
.
a delegateFocus explanation JSFiddle at: https://jsfiddle.net/WebComponents/jro0n7fz/
as you said: This does not work in FireFox yet (jan 2020)
works in Chrome, Edge, Safari (last one I did not test myself)
Another cause of the error can be a hidden required Field, which the browser can't focus on
<input type="hidden" required />