Menu
I am working on a side project in which the HTML file is generated and sent to the front end, where it is being formatted and displayed using Polymer 3 and other technologies.
Long story short, when I call querySelectorAll, it does not return, for example, all anchor tags in the document:
document.querySelectorAll("a");
Rather, it only seems to acknowledge the existence of tags if they are direct children of the node upon which querySelectorAll is called. So, if I have:
<div>
<custom-tag1>
<custom-tag2>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo!</a>
<a href="http://www.amazon.com">Amazon</a>
</custom-tag2>
</custom-tag2>
</div>
I've found I have to first get the document object, then the body object, then anything living on the top level of the body object (let's say the above div is immediately inside body, for example), etc.
So if I (finally!) get a reference to the body, I can call:
theBody.querySelectorAll("a");
and it will return an empty list. I have to do something like this:
theBody.querySelectorAll("div")[0].querySelectorAll("custom-tag1")[0].querySelectorAll("custom-tag2")[0].querySelectorAll("a");
in order to get a list of the anchor elements!
But, if anchors exist anywhere else, it won't get them.
Notes: Polymer 3 server is running. The situation may be complicated by the fact that some of the elements (at least those I see in Chrome's debugger) are shadow roots.
Thus, sometimes, we end up doing this:
someNode.shadowRoot.querySelectorAll("a");
or similar.
495
If you do a console.log in all your custom-tagX elements' ready methods (and in onload in <body>), then you will see why. The result you would see would look something like this ...
body is ready
custom-tag1 is ready
custom-tag2 is ready
... meaning that when the body is done loading, then your Polymer specific custom elements will load.
So to solve this, you need to send out an event when a specific element has loaded, and let body listen for it with addEventListener.
However, this is not how you should think when it comes to Polymer.
Why do you want the <a> tags in the first place?
I would instead build a behavior, and add it to
(I looked it up, and it's just for Polymer 1)custom-tag2, and every time you want to do whatever you want with the <a> tags in a custom element, just add that behavior to the element.
I would instead use mixins to share code that does something to the <a> tags.
https://www.polymer-project.org/3.0/docs/devguide/custom-elements#mixins
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
