HTMLカスタム要素を備えたWebコンポーネントの構築

カスタム要素は、Webコンポーネントの中核部分であり、開発者がHTML、CSS、およびJavaScriptを介して再利用可能なUIコンポーネントをネイティブに作成できるようにします。 1.カスタム要素を作成するには、htmlelementを継承し、customelements.define（）に登録する必要があります。 2。シャドウDOMを使用して、スタイルと構造のカプセル化分離を実装します。 3. ConnectedCallback、AtributeChangedCallbackなどのライフサイクルフックを介してコンポーネント状態の変更に応答します。 4.属性リスニングまたはカスタムセッターを介してデータ送信と更新を実現できます。 5. スロットメカニズムを使用して、コンテンツの挿入をサポートします。プロセス全体では、コンポーネント開発機能の改善とフレームワークへの依存を減らすのに適したフレームワークを必要としません。

HTMLカスタム要素を使用したWebコンポーネントの構築は、実際には、フレームワークに依存することなく、再利用可能で十分にカプセル化されたUIコンポーネントを実装することです。この問題は少し「高度」に聞こえますが、特にコンポーネント開発機能を改善したい、またはフレームワークへの依存を減らしたい人に適していることは難しくありません。

カスタム要素とは何ですか？

カスタム要素は、Webコンポーネント標準の一部であり、 <my-button></my-button>や<data-card></data-card>などの新しいHTML要素タグを作成できます。ブラウザネイティブサポート、追加のライブラリは必要ありません。

カスタム要素を登録するために、基本的なプラクティスはcustomElements.define()メソッドを使用し、 HTMLElementクラスを継承することです。

クラスmybuttonはhtmlelementを拡張します{
  constructor（）{
    素晴らしい（）;
    this.attachshadow（{mode： 'open'}）;
    this.shadowroot.innerhtml = `<butth>私をクリックしてください</button>`;
  }
}

customelements.define（ &#39;my-button&#39;、mybutton）;

このようにして、 <my-button></my-button> HTMLで直接使用できます。簡単に言えば、クラスを自分で書き、ブラウザに「このタグを定義します」と伝えることです。

スタイルと行動を追加する方法は？

Webコンポーネントの中心的な利点の1つは、Shadow Domを通じて達成されるスタイル分離です。単純なHTMLを書くような構造とスタイルを書くことはできますが、ページの他の部分には影響しません。

たとえば、上記のMyButtonクラスでは、次のようなスタイルを追加できます。

 this.shadowroot.innerhtml = `
  <style>
    ボタン {
      背景：＃007bff;
      色：白;
      パディング：10px 20px;
      ボーダーラジウス：4px;
      国境：なし;
      カーソル：ポインター;
    }
  </style>
  <ボタン> <スロット> </slot> </button>
`;

• <style>タグを使用して、Shadowrootにスタイルを書き込みます。
• <slot> <my-button>提交</my-button>などのコンテンツを挿入できます。

イベントバインディングが必要な場合は、コンストラクターまたはライフサイクルフックで操作できます。

 this.shadowroot.queryselector（ 'button'）。AddEventListener（ 'click'、（）=> {
  console.log（ 'ボタンがクリックされた'）;
}）;

ライフサイクルフックの使用方法は？

Custom Elementsは、Reactの使用EffectやVueのマウントされた使用と同様に、いくつかのライフサイクルコールバックメソッドを提供します。

• connectedCallback ：要素がページに挿入されたときにトリガーされます
• disconnectedCallback ：要素が削除されたときに発射されます
• attributeChangedCallback(attrName, oldVal, newVal) ：属性が変更されたときにトリガーされます
• observedAttributes ：どの属性が起きているかを引き起こす属性を宣言します

たとえば、 disabledと呼ばれるプロパティを聞きたいとします。

 static get visuredatedattributes（）{
  ['disabled']を返します。
}

astibuteChangedCallback（name、oldvalue、newValue）{
  if（name === 'Disabled'）{
    const button = this.shadowroot.queryselector（ 'button'）;
    button.disabled = newValue！== null;
  }
}

これにより、ユーザーが<my-button disabled>按钮</my-button>設定すると、内部ボタンも無効になります。

データを転送する方法は？

属性に加えて、属性反射またはカスタムセッターを介してデータを渡すこともできます。たとえば、コンポーネントにlabel属性を追加します。

 set label（value）{
  this._label = value;
  this.shadowroot.queryselector（ 'button'）。textcontent = value;
}

label（）を取得{
  this._labelを返します。
}

それを使用するとき、あなたはこれを行うことができます：

 <my-button id = "btn">デフォルトのテキスト</my-button>
<スクリプト>
  document.getElementById（ &#39;btn&#39;）。ラベル= &#39;新しいボタンテキスト&#39;;
</script>

この方法は、純粋に属性よりも柔軟であり、複雑なデータ型により適しています。

基本的にそれだけです。カスタム要素は複雑ではありませんが、ライフサイクルのコールタイミング、Shadowrootの管理、外部通信との通信方法など、詳細を無視するのは簡単です。これらをマスターすると、真に独立して維持できるコンポーネントを書くことができます。

以上がHTMLカスタム要素を備えたWebコンポーネントの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。