How to use web component - polymer

Question

Dear Polymer community,
I am having a hard time to learn polymer and follow the docs and tutorials on the web.
I am an experienced server-side C++ and Java developer. But my relationship with front-end and web development has never been smooth.
Maybe that is because web development keeps changing at a very fast pace and the docs and tutorial assume the user comes with a baggage of experience from previous web framework.
A few years ago I had to implement a web interface to the embedded box my team was working on. I did the web component using bootstrap and AngularJs. I really enjoyed that side project and was a breeze of fresh air compared to writing c++ for the embedded platform. I also really liked how AngularJs applied the MVC pattern to the web page.
Fast forward to the present, now google polymer and web components are the new fashion trends.
Went through the polymer tutorial and read a bit about web components. I think it is a great idea to reuse web components. Just browse the huge library of existing web components, pick and choose what you want. Sounds good in theory ... except ... the newbie like me has been unable for the entire day to use a single web component correctly so far.
I find the docs lacking and the sample code inaccurate. Let me go through a simple example. One of the web component I want to use is iron-pages. Awesome web component and that is exactly what I need !
I read the docs for iron-pages and looked at the demo on webcomponents.org and now is the time to use it. Except I cannot get the thing to work.
Here is exactly what I did on the command line by using the polymer-cli
mkdir my-app
cd my-app
polymer init
I chose the polymer-2-application
I try my app
polymer serve --open
Hurray it shows Hello my-app-app! on the webpage
Next I try to use the iron-pages web component. So I need to download that component using bower
bower install --save PolymerElements/iron-pages
The demo for iron-pages is listed here along with the sample code. But the sample code does not match what should appear in a web component ... or at least what I read so far in the tutorials for using a webcomponent.
There is no tag in that sample code. There is a tag which should not be there. I am sure an experienced web developer would know how to bridge the gap ... but not me.
I tried my best to adapt that iron-pages sample code to fit into my file src/my-app-app/my-app-app.html
Here is my code:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<dom-module id="my-app-app">
<template>
<style>
:host {
display: block;
}
iron-pages {
width: 100%;
height: 200px;
font-size: 50px;
color: white;
text-align: center;
}
iron-pages div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
iron-pages div:nth-child(1) {
background-color: var(--google-blue-500);
}
iron-pages div:nth-child(2) {
background-color: var(--google-red-500);
}
iron-pages div:nth-child(3) {
background-color: var(--google-green-500);
}
</style>
<h2>Hello [[prop1]]!</h2>
<iron-pages selected="0">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
</template>
<script>
/**
* #customElement
* #polymer
*/
class MyAppApp extends Polymer.Element {
static get is() { return 'my-app-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'my-app-app'
}
};
}
}
window.customElements.define(MyAppApp.is, MyAppApp);
var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
pages.selectNext();
});
</script>
</dom-module>
The iron-pages do not appear on the web page. The developer console on chrome shows an error that I am trying to do addEventListener on a null pointer. So I tried to comment out the addEventListener portion. I expect to still see one of the iron-pages even if I can't click to rotate among the pages. But the iron pages still don't appear at all.
I would appreciate if one of you experienced web devs could enlighten me. I have other examples of other web components I could not use perfectly such as app-toolbar, I could not get the iron-icon to appear ... even if I bower install iron-icon. Anyhow, I would be happy if I could start by getting my iron-pages hooked up.

Answer 1

Remove the quotes and use like : bower install --save PolymerElements/iron-pages
instead of : bower install --save PolymerElements/'iron-pages'
And also all single quotes in your code 'iron-pages'
just use iron-pages
DEMO
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<dom-module id="my-app-app">
<template>
<style>
:host {
display: block;
}
iron-pages {
width: 100%;
height: 200px;
font-size: 50px;
color: white;
text-align: center;
}
iron-pages div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
iron-pages div:nth-child(1) {
background-color: var(--google-blue-500);
}
iron-pages div:nth-child(2) {
background-color: var(--google-red-500);
}
iron-pages div:nth-child(3) {
background-color: var(--google-green-500);
}
</style>
<h2>Hello [[prop1]]!</h2>
<iron-pages selected="0">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
<script>
/**
* #customElement
* #polymer
*/
class MyAppApp extends Polymer.Element {
static get is() { return 'my-app-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'my-app-app'
}
};
}
}
window.customElements.define(MyAppApp.is, MyAppApp);
var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
pages.selectNext();
});

Answer 2

You are getting null pointer becouse of setting an event outside of your class.
No code should be there except the class registration (customElements.define...)
Generally in Polymer you should set listeners in the ready callback.
Custom element lifecycle here: https://www.polymer-project.org/2.0/docs/devguide/custom-elements
In your case:
ready() {
super.ready();
var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
pages.selectNext();
});
}