Как отследить события в Shadow DOM?

Question

[Станислав Ким]

Изучаю Polymer Project
Скажем есть элемент - карточка с кнопкой. Эти элементы выводятся на страничке. Скажем элементов(карточка с кнопкой) штук 10. Мы помещаем их на страницу как Shadow DOM.
<button-element></button-element>
Нужно сделать так, чтобы можно было отслеживать нажатия на кнопки. И вне этих Shadow DOM стоит счетчик, который считает нажатия на кнопки.

<div id="counter">Здесь число нажатий</div>
#shadow root
   <button-element></button-element>
   <button-element></button-element>
   <button-element></button-element>
   <button-element></button-element>
   <button-element></button-element>
   <button-element></button-element>
   <button-element></button-element>

Каким образом реализовать можно?

Answer 1

[vix]

Делегированный обработчик события

var counter = document.querySelector('#counter');
  counter.count = 0;
  counter.addEventListener('click', function (event) {
    if (event.target.tagName == 'button-element') {
      counter.count++;
      counter.textContent = counter.count; 
    }
  });