Accessing custom Polymer elements using DOM functions

[Junius Gunaratne]

I have a number of Polymer elements on my page that are generated dynamically using <template repeat>. However, these elements don't seem to be accessible using native DOM functions like getElementsByTagName or getElementsByClassName even after the document has loaded and is ready. I can access these custom Polymer elements with DOM functions by defining them right on the HTML page. How can I access dynamically generated elements?

[Junius Gunaratne]

As a follow up, this seems to be related to the shadow DOM, but are there strategies to access DOM elements within a custom Polymer element other than tracking all elements individually as they are added to the page?

[Scott Miles]

I think we need some more details. In general, we expect `getElementsByTagName` et al to work for elements in the main document however they are generated.

There are a few things that could make your test fail: 

(1) the elements are being generated in Shadow DOM. Shadow DOM is encapsulated, which is to say, removed from the view of things like 'document.getElementsByTagName'. This is it's actual purpose, to hide DOM.

(2) You are calling 'document.getElementsByTagName' at the wrong time. You say 'after the document is loaded' but it's not clear what time you mean. The 'document' state has to do with the native parser and other features, but operations like data-binding and custom-element generation can happen a few ticks later.

Can you make a jsbin, pastebin, or gist that shows more details of what you are doing?

On Thu, Jan 23, 2014 at 10:53 AM, Junius Gunaratne <jun...@google.com> wrote:

I have a number of Polymer elements on my page that are generated dynamically using <template repeat>. However, these elements don't seem to be accessible using native DOM functions like getElementsByTagName or getElementsByClassName even after the document has loaded and is ready. I can access these custom Polymer elements with DOM functions by defining them right on the HTML page. How can I access dynamically generated elements?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAC57C_RKGxt9_YnKR2ASgv3so%2Bi3XsYjFoWQg2rLBtQpYX7xBQ%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Junius Gunaratne]

I figured this out (related to 1). I needed to access elements contained within my custom element which are in the Shadow DOM by using:

document.getElementsByTagName('polymer-custom-element')[0].shadowRoot

[Scott Miles]

Glad you solved your problem!

But, fwiw, accessing elements inside the element shadowRoot from the document is a Bad Idea.

The usual idea is to hide details in ShadowDOM and keep your document-level code unaware of it.