Атрибуты и свойства настраиваемых событий Vanilla Web Component

Question

Использование веб-компонентов без каких-либо фреймворков, каков правильный способ реализации настраиваемого события? Например, у меня есть пользовательский элемент x-pop-out, который имеет пользовательское событие pop я хотел бы все следующие работы:

<x-pop-out onpop="someGlobal.doSomething()"/>

var el = document.getElementsByTagName('x-pop-out')[0]; 
el.onpop =()=> someGlobal.doSomething(); 
//or 
el.addEventListener('pop',()=> someGlobal.doSomething()); 

Последний один я получаю, как это сделать, но сделать Мне нужно настраивать атрибут и getter/setter для каждого? Кроме того, есть eval() подходящий способ выполнения строки из атрибута?

Answer 1

решение для прослушивания событий решение (третье) является самым простым, потому что вам не нужно определять что-либо особенное, чтобы поймать событие.

Решения для обработки событий решениям необходимо сделать eval() (первый, от атрибута) или вызвать функцию fonction явно (вторая).

Если вы не можете использовать eval, вы можете проанализировать строку атрибута.

customElements.define('x-pop-out', class extends HTMLElement { 
 
    connectedCallback() { 
 
     this.innerHTML = `<button id="Btn">pop</button>` 
 

 
     this.querySelector('button').onclick =() => { 
 
      this.dispatchEvent(new CustomEvent('pop')) 
 
      if (this.onpop) 
 
       this.onpop() 
 
      else 
 
       eval(this.getAttribute('onpop')) 
 
     }    
 
    } 
 
}) 
 

 
XPO.addEventListener('pop',() => console.info('pop'))

<x-pop-out id=XPO onpop="console.log('onpop attribute')"></x-pop-out> 
 
<hr> 
 
<button onclick="XPO.onpop =() => console.log('onpop override')">redefine onpop</button>