CODEWITHSUNDEEP
polymer
BLASTOR
BLASTOR

Reputation: 316

How to navigate accross shadow DOMs recursively

I want to validate a custom polymer element. To do this, I want in javascript to access all my nested polymer elements to see if they are valids. I can't find an easy way to do this. this.querySelectorAll does not find my inputs that are nested in other polymer elements. It seems I can't use "/deep/" in these selectors. Is there an easy way to do this ? Or do I have to do a recursive javascript methods that will call a querySelectorAll in all elements with shadow roots ?? (I guess performances will get ugly...)

Thanks for your help. If there is no fast solution, I will probably try the other way around (have my inputs register to the parent)

Upvotes: 1

Views: 485

Answers (1)

Fuzzical Logic
Fuzzical Logic

Reputation: 13015

Answer:

element.querySelectorAll() will find some elements when using /deep/, however, it only goes so far (1 shadow dom level). This would indeed necessitate recursive calls from each ElementNode.

Note:

This type of behavior largely goes against the core tenets of HTML (i.e. that the web page works no matter how well-formed the content is). In other words, all elements are valid no matter their placement.

As an example, I have made a custom element that only renders specific child elements and hides all others. This still keeps in line with the above tenet, as an element's base rendering is controlled by the element/agent, but allows for the developer/designer to customize its presentation aside from the standard presentation.

Upvotes: 1

Related Questions