document.querySelector() возвращает ноль

Я создаю полимерный элемент. Я сделал шаблон и сейчас работаю над сценарием. По какой-то причине document.querySelector возвращает значение null для селекторов классов и идентификаторов. Не уверен, что это не работает с полимером (нет причин, по которым это не должно), или я что-то не импортировал, или что-то еще не так.

событие-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>

javascript html polymer shadow-dom
person user3903150    schedule 03.08.2014    source источник

Ответы (2)


arrow_upward
15
arrow_downward

<event-card-description id="description"> находится в тени вашего элемента. document.querySelector("#description") ищет узел с id#description в основном документе. Ожидается, что узел не будет найден, потому что его скрывает граница теневого дома. Пытаться:

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

Однако у Polymer есть замечательная функция, позволяющая статическим элементам с идентификаторами сопоставляться с this.$.<id>. Вы можете использовать this.$.description для доступа к этому элементу.

person ebidel    schedule 03.08.2014
comment
Ух ты, Эрик Бидельман! Спасибо Эрик! И продолжайте в том же духе! - person Cricketer; 03.08.2014

arrow_upward
0
arrow_downward

для нескольких значений в атрибутах используйте знак ~, например,

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

или если вы хотите использовать это только для элемента polymer-element, используйте:

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