バニラWebコンポーネントのカスタムイベント属性とプロパティ

Question

Webコンポーネントをフレームワークなしで使用すると、カスタムイベントを実装する適切な方法は何ですか？

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

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

私が行う方法を得るが、やる最後の1：たとえば、私は仕事に、以下のすべてたいと私はpopのカスタムイベントを持つカスタム要素x-pop-outを持っていると言います私は、属性とgetter/setterをそれぞれカスタム実装する必要がありますか？また、eval()は属性から文字列を実行する適切な方法ですか？

Answer 1

イベントリスナー解決策（3番目）は、イベントをキャッチするために特別なものを定義する必要がないため、最も簡単です。

イベントハンドラ解決策は、eval()（最初のもの、属性から）を作成するか、明示的に（2番目のものを）呼び出す必要があります。

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>