web-dev-qa-db-fra.com

document.querySelector () renvoie null

Je crée un élément polymère. J'ai créé le modèle et je travaille maintenant sur le script. Pour une raison quelconque, document.querySelector renvoie la valeur null pour les sélecteurs class et id. Je ne suis pas sûr que cela ne fonctionne pas avec un polymère (sans aucune raison, ou si je n'ai pas importé quelque chose ou quoi d'autre ne va pas.

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>
javascripthtmlhtml5polymershadow-dom
13
user3903150

<event-card-description id="description"> est dans le dôme de votre élément. document.querySelector("#description") recherche un noeud avec id#description dans le document principal . On s'attend à ce que le nœud ne soit pas trouvé car la limite du dom de l'ombre le cache. Essayer:

this.shadowRoot.querySelector("#description");

Cependant, Polymer possède une fonctionnalité géniale dans laquelle les éléments statiques ayant un identifiant sont mappés sur this.$.<id>. Vous pouvez utiliser this.$.description pour accéder à cet élément.

15
ebidel

pour des valeurs multiples dans les attributs, utilisez le signe ~, par ex. 

var elem = document.querySelector("[attributes~=description]");

ou si vous voulez utiliser ceci uniquement pour l'élément polymer-element, utilisez:

var elem = document.querySelector("polymer-element[attributes~=description]");
0
31113