How to use web component

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();
    });
  }