title: document.querySelector() returns null
body: <p>I'm creating a polymer element. I've made the template and am now working on the script. For some reason document.querySelector is returning null for both class and id selectors. Not sure if this doesn't work with polymer (no reason it shouldn't) or I haven't imported something or what else is wrong.</p>
  
  <p>event-card.html</p>
  
  <pre><code>&lt;link rel="import" href="../components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="event-card-description.html"&gt;
  
  &lt;polymer-element name="event-card" attributes="header image description"&gt;
    &lt;template&gt;
      &lt;style&gt;
        .card-header {
          display: block;
          position: static;
          font-size: 1.2rem;
          font-weight: 300;
          width: 300px;
          height: 300px;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          overflow: hidden;
        }
        event-card-description {
          margin: 0;
          position: relative;
          top: 225px;
        }
      &lt;/style&gt;
  
      &lt;div 
        style="background: url(../images/{{image}}.jpg) no-repeat; background-size: cover" 
        class="card-header" layout horizontal center
        on-mouseover='{{onHovered}}' 
        on-mouseout='{{onUnhovered}}'&gt;
        &lt;event-card-description
          id="description"
          header={{header}} 
          description={{description}}&gt;
        &lt;/event-card-description&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer('event-card', {
        onHovered: function() {
          var elem = document.querySelector("#description");
          console.log(elem);
        }
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>