コンテキスト認識Webコンポーネントは、あなたが思っているよりも簡単です

この記事では、Webコンポーネントの頻繁に見過ごされているライフサイクルコールバックを調べて、コンテキスト対応要素をどのように可能にするかを示します。これらの機能の力を紹介し、その環境に反応するWebコンポーネントを構築します。

シリーズの概要

この記事は、Webコンポーネント開発の簡素化に関するシリーズの一部です。

• Webコンポーネント：あなたが思っているよりも簡単です
• インタラクティブなWebコンポーネント：思ったよりも簡単です
• WordPressでWebコンポーネントを使用する：あなたが思っているよりも簡単です
• Webコンポーネントを備えた組み込みの要素をスーパーチャージする：あなたが思っているよりも簡単
• コンテキスト認識Webコンポーネント：あなたが思っているよりも簡単です（この記事）
• Webコンポーネントの擬似クラスと擬似要素：あなたが思っているよりも簡単です

Webコンポーネントライフサイクルコールバック

4つのキーコールバックがWebコンポーネントのライフサイクルを管理します。

• connectedCallback ：要素がDOMに追加されたときに発射されます。
• disconnectedCallback ：要素がDOMから削除されたときに発射されます。
• adoptedCallback ：要素が新しいドキュメントに移動されたときに解雇されました。
• attributeChangedCallback ：観察された属性が変更されたときに解雇されました。

実用的な例でこれらを説明しましょう。

黙示録的な人コンポーネント

を作成します<postapocalyptic-person></postapocalyptic-person>成分。それぞれの人は、その親要素の.humanまたは.zombieクラスによって決定された人間またはゾンビのいずれかです。コンポーネントは、Shadow Domを使用して適切な画像を表示します。

 customelements.define（
  「黙示録的な人」、
  クラスはhtmlelementを拡張します{
    constructor（）{
      素晴らしい（）;
      this.shadowroot = this.attachshadow（{mode： "open"}）;
    }
    // ...ライフサイクルコールバックがここに追加されます...
  }
）;

私たちの最初のHTML：

<div class="humans">
  <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies">
  <postapocalyptic-person></postapocalyptic-person>
</div>

connectedCallbackを使用します

connectedCallback Whenと呼ばれます<postapocalyptic-person></postapocalyptic-person>ページに追加されます。画像を追加するために使用します。

 connectedcallback（）{
  const image = document.createelement（ "img"）;
  if（this.parentnode.classlist.contains（ "人間"））{
    image.src = "https://assets.codepen.io/1804713/lady.png";
  } else if（this.parentnode.classlist.contains（ "zombies"））{
    image.src = "https://assets.codepen.io/1804713/ladyz.png";
  }
  this.shadowroot.appendChild（画像）;
}

これにより、親のクラスに基づいて正しい画像が表示されます。注： connectedCallback複数回発射できます。 this.isConnectedを使用して接続ステータスを確認します。

connectedCallbackで人々を数えます

ボタンを追加して人を追加/削除し、カウントを追跡しましょう。

<div>
  <button id="addbtn">人を追加します</button>
  <button id="rmvbtn">人を削除します</button>
  <br>人間： <span id="human-count">0</span>
  ゾンビ： <span id="zombie-count">0</span>
</div>

ボタンイベントリスナー：

 // ...（人の論理を追加/削除）...

connectedCallbackを更新してカウントを更新します。

 connectedcallback（）{
  // ...（画像ロジック）...
  //画像ソースに基づいてカウントを更新します
}

disconnectedCallbackでカウントを更新します

disconnectedCallback減少は、人が削除されたときにカウントされます。画像ソースをタイプのプロキシとして使用します。

 disconnectedCallback（）{
  const image = this.shadowroot.queryselector（ 'img'）;
  //画像ソースに基づいて減少カウント
}

養子adoptedCallbackとattributeChangedCallbackコールバックによるピエロの検出

隠されたピエロの可能性を紹介し、それらをに移動します<iframe></iframe>adoptedCallbackを使用し、 attributeChangedCallbackでそれらを明らかにします。この高度な例の詳細は簡潔に省略されていますが、コアコンセプトには、養子adoptedCallbackを使用して、コンポーネントが新しいドキュメントに移動されていることを検出し、変更を属性に反応し、それに応じて画像を更新することが含まattributeChangedCallbackます。

これは、ライフサイクルコールバックが動的でコンテキストを意識したWebコンポーネントを作成するための強力なツールを提供する方法を示しています。

以上がコンテキスト認識Webコンポーネントは、あなたが思っているよりも簡単ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。