An excerpt from http://www.sitepoint.com/access-member-functions-polymer-elements/, by @davidv
This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
I’m working on a silly Polymer project right now, which parses a Pokemon database and returns a picture of a Pokémon, then speaks the creature’s name over your speakers. Here’s the source code for my project.
It’s my first time using Polymer, and I’m certainly getting snagged in a few spots. Most recently, it was trying to return member functions of a Polymer object that I created. Took me forever to figure this out, so I wanted to share it with you in this tutorial.
Sidenote: you can also search for my more detailed write-up on Web Components here.
The Wrong Way
I have a Web Component which looks like this:
<x -radial-buttons id="radial-button-template"></x>
If I try to access it by its ID…
var temp = document.querySelector("#radial-button-template");
// returns <x -radial-buttons id="radial-button-template"></x>
I cannot access any of the functions inside it. They return undefined. So if I tried this:
var temp = document.querySelector("#radial-button-template");
temp.getFirstElement // returns undefined