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

前面に書かれた

最近、Web コンポーネント (WC) に取り組んでおり、いくつかの初期成果を達成しました。しかし、今日は WC をもう一度見ていきたいと思います。

WC とは何でしょうか?

簡単に言えば、Web コンポーネントはコンポーネントを HTML タグの形式でカプセル化し、使用時に追加の JS コードは必要ありません。

コンポーネントはフロントエンドの開発方向です。周囲のテクノロジーエコシステムを別にすれば、React と Vue はどちらもコンポーネントフレームワークです。したがって、WC は元のラベルの延長として見ることができます。結局のところ、それはまだラベルです。

<video></video>タグと同様に、ネイティブタグよりも多くのスタイルと操作属性があります。

Google は Chrome ブラウザを管理しているため、ブラウザのネイティブコンポーネント、つまり Web コンポーネント API を推進してきました。

サードパーティのフレームワークと比較すると、ネイティブコンポーネントはシンプルで直接的かつ直感的であり、外部モジュールをロードする必要がなく、コード量も少なくなります。すべてが完璧で、React、Vue などの置き換えにも使えるようです。

現在の欠陥

他の Web フレームワークと併用すると、いくつかの小さな問題が発生し、開発エクスペリエンスに問題が発生する可能性があります。

1. コンポーネント内部イベントのコールバック

たとえば、ポップアップコンポーネント ( <my-dialog></my-dialog> ) の [OK] ボタンの場合、そのイベントはどのようにトリガーされますか?

クラス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);

現在の解決策は、カスタム要素内でnew CustomEvent()を使用し、 addEventListenerを使用して外部でリッスンすることです。この書き方は非常に醜く、まるでネイティブ JS を使用してアプリケーションを作成する時代に戻ったかのようです。

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

2. コンポーネントスタイルの範囲

開発者にとって、コンポーネントの内部スタイルを調整する必要が生じるのは避けられません。 antd 、 vant 、またはその他のコンポーネントライブラリを使用する場合でも、WC の CSS 汚染防止メカニズムにより、内部スタイルを変更することが困難になります。内部スタイルを偽装するためには、いくらかの代償を支払う必要がある

3. コンポーネント内の内部リソースの相対パス問題

現在、カスタム要素 v1、テンプレート、HTML インポートを直接ベースとするコンポーネントは、ユーザーの環境を認識せずに、またユーザーに追加の制限を加えずに、内部的にカプセル化されたリソースファイルを使用することで、完全にリソースに依存しないことはできません。たとえば、カスタムアイコンコンポーネントがある場合:

クラス 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);

使用しているプロジェクトのルートディレクトリに icon.svg ファイルがない場合、gg です。ここで CDN パスを使用すると、クロスドメインの問題が発生します。

4. フォームコンポーネント値取得問題

Shadow DOM 内の <input>、<textarea>、または <select> タグの値は、フォームに自動的に関連付けられません。

サンプルコード:

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

WCコンポーネントを使用した後

<フォーム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()) {
      コンソールにログ出力します。
    }
 
  });
</スクリプト>

送信時にinput-ageのvalueを取得できません。もちろん解決策はあるだろうが、それは複雑なものとなるだろう。