Web コンポーネントの内部イベント コールバックと問題点の分析

クラスmyDialogはHTMLElementを拡張します{
  // ...
  接続されたコールバック() {
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <div class="ダイアログ">
        <div class="ダイアログコンテンツ">
          <div class="ダイアログボディ">
            ポップアップコンテンツ</div>
 
          <button id="okBtn">OK</button>
        </div>
      </div>
    `;
     shadowRoot.querySelector('#okBtn').addEventListener('click', () => {
      // コンポーネント内のイベントを定義します this.dispatchEvent(new CustomEvent('okBtnFn'));
    });
  }
} 
customElements.define('my-dialog', myDialog);

<私のダイアログ></私のダイアログ> 
<スクリプト>
  エクスポートデフォルト{
    作成された() {
      document.addEventListener('okBtnFn', 関数(){
        // ポップアップボタンをクリックしてコールバックイベントをトリガーします});
    }
  }
</スクリプト>

クラス MyIcon は HTMLElement を拡張します {
    静的に観測属性を取得します（）{['name','size','color']を返します}
    コンストラクタ() {
        素晴らしい（）;
        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.innerHTML = `
            <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">
                <use id="use"></use>
            </svg>        
    } 
    attributeChangedCallback (名前、古い値、新しい値) {
        if(name == 'name' && this.shadowRoot){
            // 使用中のプロジェクトのルートディレクトリにicon.svgファイルがない場合、gg
            this.use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `./icon.svg#icon-${newValue}`);
        }
    }
}
customElements.define('my-icon', MyIcon);

// ウェブコンポーネント
クラス InputAge は HTMLElement を拡張します {
  コンストラクタ() {
    素晴らしい（）;
  }  
// コンポーネントを接続する
  接続されたコールバック() {
    const shadow = this.attachShadow({ mode: 'closed' });
    shadow.innerHTML = `<input type="number" placeholder="age" min="18" max="120" />`;
  }
}
// コンポーネントを登録する
customElements.define( '入力年齢', InputAge );

<フォームid="myform">
  <input type="text" name="あなたの名前" placeholder="名前" />
  <input-age name="あなたの年齢"></input-age>
 
  <button>送信</button>
</フォーム>
 
<スクリプト>
 定数フォーム = document.getElementById('myform');
 
  フォーム.addEventListener('送信', e => {
    
    e.preventDefault();
    console.log('送信されたデータ:');
 
    const データ = 新しい FormData(フォーム);
    for (let nv of data.entries()) {
      コンソールにログ出力します。
    }
 
  });
</スクリプト>