custom-element - reportValidity() 与表单关联的 customElement 失败

Question

我有一个与表单关联的 customElement，它管理自己的有效性和验证消息。它作为表单成员按预期工作；调用 form.reportValidity() 会将适当的错误消息放置在适当的 anchor 元素上。但是，调用 customElement.reportValidity() 会导致错误:An invalid form control with name='' is not focusable.

我对 reportValidity() 的理解是我们可以在单个元素上调用它，无论它是否是 HTMLFormControlsCollection 的成员。例如，您可以在以下孤立的 input 上调用 report validity:

document.querySelector("#foo").reportValidity();

<input id="foo" value="" required>

所以因为上面的工作，我不认为我不符合任何设计原则。

我的最小重现通过调用 attachInternals 并构建单个输入元素的 shadowDom 来设置与表单关联的自定义元素。此自定义元素的单个实例嵌套在表单元素中。页面加载，并在表单和自定义元素上调用 reportValidity。对自定义元素的调用失败:

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>

所以(很可能)我做错了什么，你可能会帮忙，或者这是(Chrome 的)自定义元素中的一个错误(FF 还没有实现 attachInternals)，或者这个是设计好的，我想做的事无法完成。

Answer 1

更新 现在报告了一个错误:

https://bugs.chromium.org/p/chromium/issues/detail?id=1139621&q=%22not%20focusable%22&can=2

此答案可能不再有效。

---

您需要使表单元素在 shadowDOM 中可聚焦
当你创建 shadowDOM 时:

this.attachShadow({
        mode: "open",
        delegatesFocus: true
      });

在 SO 代码段中似​​乎不起作用...

工作 JSFiddle 在:https://jsfiddle.net/WebComponents/9uq15ndr/

.

一个delegateFocus解释 JSFiddle 位于:https://jsfiddle.net/WebComponents/jro0n7fz/

如您所说:这在 FireFox 中尚不可用(2020 年 1 月)

适用于 Chrome、Edge、Safari(最后一个我自己没有测试过)

错误的另一个原因可能是隐藏的必填字段，浏览器无法关注

<input type="hidden" required />