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
Vous devez vous connecter pour publier un commentaire.
<event-card-description id="description">
est dans ton élément du shadow dom.document.querySelector("#description")
est à la recherche d'un nœud avecid#description
dans le document principal. Il est prévu que le nœud n'est pas trouvé, parce que le shadow dom limite de la cache. Essayez:Cependant, le Polymère a une fonctionnalité impressionnante où les éléments statiques que les id sont mappés à
this.$.<id>
. Vous pouvez utiliserthis.$.description
pour obtenir à cet élément.