Суффикс ввода полимерной бумаги не работает как ожидалось

Question

У меня есть бумажный ввод, в который я вложил SVG через элемент <object>, используя атрибут suffix.

Теперь я хочу вызвать функцию через tap на элементе <object>.

Docs

Так вот мой код:

HTML

<paper-input class="border" label="Deine Email-Adresse" no-label-float> 
    <object suffix data="../icons/arrow.svg" type="image/svg+xml" on-tap="_subscribeNewsletter"> 
     <!--<img src="fallback.jpg" />--> 
    </object> 
</paper-input> 

CSS

.newsletter-input paper-input object { 
    height : 60px; 
    width : 100px; 
    position: absolute; 
    right: -10px; 
    margin-top: 3px; 
    cursor: pointer; 
} 

на кране не выстрелил ни курсор отображается как указатель ,

Ввод сам вложен в div .newsletter-input, и в обоих случаях у div и ввода есть еще несколько стилей, применяемых к ним, при необходимости я могу добавить их, просто дайте мне знать.

Любые идеи?

Справка была бы принята с благодарностью.

Answer 1

Попробуйте следующий код:

<paper-input class="border" label="Deine Email-Adresse" no-label-float> 
    <img suffix src="../icons/arrow.svg" onerror="this.src='fallback.png'" on-tap="_subscribeNewsletter" /> 
</paper-input> 

Испытано и работал как шарм :-)

Answer 2

Ваш стиль не работает, потому что ваш object в конечном итоге отображается в dom от paper-input. Поэтому ваш селектор ошибочен. Если вы держите object в качестве только селектора для стилизации, он будет работать правильно.

object { 
      height : 60px; 
      width : 100px; 
      position: absolute; 
      right: -10px; 
      margin-top: 3px; 
      cursor: pointer; 
     } 

И я не понимаю, почему вы tap слушатель не должен работать. Это работает нормально для меня