Uncaught ReferenceError drawer is not defined at HTMLElement.onclick in Polymer 2.0?

Question

Im pretty new to polymer 2.0 and am trying to get my head around certain errors i dont seem to understand.

One of them being this:

Uncaught ReferenceError: drawer is not defined at HTMLElement.onclick

So to explain my problem, I am trying to use app-drawer which will slide from left to right on a click event. But the click event returns the above error. How can I make sure the drawer is defined? (Btw, I'm following the code snippet that is provided in the main website of app-layout section. - https://www.webcomponents.org/element/PolymerElements/app-layout).

Here is my code:

<app-header reveals>
  <app-toolbar>
    <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
    <div main-title>My app</div>
    <paper-icon-button icon="delete"></paper-icon-button>
    <paper-icon-button icon="search"></paper-icon-button>
    <paper-icon-button icon="close"></paper-icon-button>
    <paper-progress value="10" indeterminate bottom-item></paper-progress>
  </app-toolbar>
</app-header>
<app-drawer id="drawer" swipe-open></app-drawer>

This is exactly the same in the website, so why does it work for them, but not me.

The problem occurs when i click on the menu icon.

Please help.

Thanks

Answer 1

I suggest you not to use onclick..

They are providing really bad approach and the reason why your code isn't working is propably because you are using shadow dom, instead, they are using shady dom.

It means, you can't simply do document.getElemenetById("drawer").toggle(); in shadow dom. There are shadowRoots which wrap whole element into some block that is not accessible from outside. (unless you use shadowRoot notation.)

nevermind, to make it work, you have to do some boilerplate function.

First, use on-tap instead of onclick. This is just Polymer function. Your paper-icon-button will be like:

<paper-icon-button icon="menu" on-tap="openDrawer"></paper-icon-button>

and then, define function openDrawer:

openDrawer: function() {
  this.$.drawer.toggle();
}

and that's it. It's also good to mention that if you are using native elements in Polymer 2.0, you should use on-click listener. If you want to use on-tap you have to extend Polymer.GestureEventListeners.

class somElement extends Polymer.GestureEventListeners(Polymer.Element){}