title: Call function on polymer navigation drawer panel
body: <p>I am stuck. I am playing around with polymer but I do not manage to call the togglePanel function on the drawer panel and my code looks like this:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;!-- 1. Load platform.js for polyfill support. --&gt;
      &lt;script src="bower_components/platform/platform.js"&gt;&lt;/script&gt;
  
      &lt;!-- 2. Use an HTML Import to bring in the element. --&gt;
      &lt;link rel="import"
          href="bower_components/core-ajax/core-ajax.html"&gt;
  
      &lt;link rel="import"
          href="bower_components/core-drawer-panel/core-drawer-panel.html"&gt;
  
      &lt;link rel="import"
          href="bower_components/core-toolbar/core-toolbar.html"&gt;
  
      &lt;link rel="import"
          href="bower_components/core-icon-button/core-icon-button.html"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;script&gt;
          function openDrawer() {
              alert("fuck");
              var drawer = document.getElementById("main-drawer");
              drawer.togglePanel();
          }
      &lt;/script&gt;
  
      &lt;core-drawer-panel id="main-drawer"&gt;
          &lt;div drawer style="background-color: #FF0000;"&gt;
  
          &lt;/div&gt;
          &lt;div main style="background-color: #00FF00;"&gt;
              &lt;core-toolbar style="background-color: #8888FF;"&gt;
                  &lt;core-icon-button icon="menu" onclick="openDrawer()" on-tap="openDrawer()"&gt;&lt;/core-icon-button&gt;
                      &lt;div flex&gt;PageTitle&lt;/div&gt;
              &lt;/core-toolbar&gt;
          &lt;/div&gt;
      &lt;/core-drawer-panel&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The function gets called when I click the menu button but nothing more happens, i made sure using an alert.</p>
  
  <p>I guess it has something to do with the shadow DOM but I am not sure. I hope somebody knows how to call its function.</p>