查询聚合物 3 页面中的所有元素（queryselectorall）由于阴影元素而无法正常工作

Question

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

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

现在，我正在升级到 polymer 3，它不能与 queryselectorAll 一起使用，因为所有无效输入现在都被 shadowroot 包裹了。使用 id 一个一个地处理元素并遍历 shadow root 将很困难，因为我们有更多的按需表单元素。给我任何获取页面中所有无效元素的想法。

Answer 1

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

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