javascript - 由于影子元素，查询 polymer 3 中页面中的所有元素(queryselectorall)不起作用

Question

以前我使用 polymer 1，对于一些自定义验证，我使用以下代码和 queryselectorAll 来获取所有无效元素

            var _formTag = this.$$("request-details").$$("#newForm");
           _array = Array.prototype.slice.call(_formTag.querySelectorAll(":invalid"),0);

现在，我正在升级到polymer 3，它无法与queryselectorAll一起使用，因为所有无效输入现在都用shadowroot包装起来。使用 id 逐一处理元素并遍历影子根将很困难，因为我们有更多数量的按需表单元素。建议我任何想法来获取页面中的所有无效元素。

Answer 1

您可以获取该表单中需要验证的所有元素，然后过滤掉无效的元素，如下所示

var elements = this.$.newForm._getValidatableElements();
var invalidElements = elements.filter(x => x.invalid);