Search code examples
javascriptpolymerpolymer-2.x

Webcomponents Polymer elements are not visible

I am trying to use PolymerElements in my project, have imported all libraries, but there is nothing on the screen (in the console in the DOM-tree all elements are in place, so they are simply not visible at the moment).

Could you please tell me what am I doing wrong?

Here is my code

Here are all imports 

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/app-layout/app-layout.html">
<link rel="import" href="/bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="/bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="/bower_components/app-layout/app-header-layout/app-header-layout.html">

<link rel="import" href="/bower_components/app-toolbar/app-toolbar.html">
<link rel="import" href="/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs-icons.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">

DOM-module with HTML

<dom-module id="main-component">
  <template>
    <style>

    </style>

    <app-drawer-layout>
      <app-drawer>
        <app-toolbar>
        </app-toolbar>

        <paper-menu>
          <paper-icon-item></paper-icon-item>
        </paper-menu>
      </app-drawer>

      <app-header-layout>
        <app-header>
          <app-toolbar>
            <paper-tabs>
              <paper-tab>My first tab!</paper-tab>
            </paper-tabs>
          </app-toolbar>
        </app-header>

        <iron-pages>
          <div>One</div>
          <div>Two</div>
          <div>Three</div>
        </iron-pages>
      </app-header-layout>
    </app-drawer-layout>

  </template>

And the script

  <script>

    class MainComponent extends Polymer.Element {
      static get is() { return 'main-component'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'main-component'
          }
        };
      }

      ready() {
        super.ready();
      }
    }

    window.customElements.define(MainComponent.is, MainComponent);
  </script>
</dom-module>
Solution

  • It appears you are using a deprecated paper-menu. Not sure if this happens with your build but according to the readme it'll force you to use Polymer 1.x which does not understand class based syntax.

    Try starting new with fresh Polymer Starter Kit and upgrade to paper-listbox. I did that with your code and got your tab element on screen (I had to fix your paths though).