How to Access Member Functions in Polymer Elements

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

Continue reading this article on SitePoint!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.