document.querySelector () renvoie null

Je suis de la création d'un polymère de l'élément. J'ai fait le modèle et je suis en train de travailler sur le script. Pour une raison quelconque document.querySelector retourne null pour à la fois classe et les sélecteurs d'id. Pas sûr si cela ne fonctionne pas avec le polymère (pas de raison que ça ne devrait pas) ou je n'ai pas importé quelque chose ou ce que les autres ont tort.

event-card.html

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="event-card-description.html">

<polymer-element name="event-card" attributes="header image description">
  <template>
    <style>
      .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;
      }
    </style>

    <div 
      style="background: url(../images/{{image}}.jpg) no-repeat; background-size: cover" 
      class="card-header" layout horizontal center
      on-mouseover='{{onHovered}}' 
      on-mouseout='{{onUnhovered}}'>
      <event-card-description
        id="description"
        header={{header}} 
        description={{description}}>
      </event-card-description>
    </div>
  </template>

  <script>
    Polymer('event-card', {
      onHovered: function() {
        var elem = document.querySelector("#description");
        console.log(elem);
      }
    });
  </script>
</polymer-element>

source d'informationauteur user3903150