Webmasters Gallery

I’m working on a silly Polymer project right now, which parses a Pokémon 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: 1 If I try to access it by its ID…. 1 2 var temp = document.querySelector(“#radial-button-template”); // returns But I cannot access any of the function it. They return “undefined”. So if I tried this: 1 2 var temp = document.querySelector(“#radial-button-template”); temp.getFirstElement // returns undefined Why is This Happening? The reason behind this is due to the Shadow DOM’s encapsulation. It is both a gift and a curse. In this case, I am accessing the element, and not the shadowRoot, which will expose the public methods […]