查询 polymer 3 页面中的所有元素（queryselectorall）由于阴影元素而无法工作

Question

Previously i used polymer 1, for some custom validation i have used following code with queryselectorAll to get the all invalid elements

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

now, i am doing upgrade to polymer 3 and it is not working with queryselectorAll since all invalid inputs wrapped now with shadowroot. Handling elements one by one using id and traversing through shadow root will be tough since we have more number of on-demand form elements. Sugget me any idea to get the all invalid elements in page.

Answer 1

You can get all elements in that form which needs to be validated and then filter which are invalid as below

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