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

reportValidity() failure with form-associated customElement

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

我对reportValidity()的理解是我们可以在单个元素上调用它,无论它是否是HTMLFormControlsCollection的成员。例如,您可以调用 report validity on the following orphan input:

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 yet),或者这是设计好的,我想做的事情无法完成。

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

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/CustomElementsExamples/cjgk94zv

.

a delegateFocus 解释 JSFiddle 位于:https://jsfiddle.net/CustomElementsExamples/9n6wtgj7/

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

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

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

<input type="hidden" required />