6

私の質問に貼り付けられたステートメントは、https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacksからコピーされました。

Webcomponent の経験のない開発者として、これまでに推奨されたすべての経験則とベスト プラクティスを理解しようとしています。

読み続けると、「... Node.isConnected を使用して確認してください」と表示されます。それが何を意味するかは明らかです。まだ接続されているかどうかを確認してください。ただし、少なくとも私にとっては、回避するために何をすべきか、状況によっては何を期待すべきかは明確ではありません。

私の場合は、SSE (Server Sent Events) をリッスンする Web コンポーネントを作成しています。これは、生きているダッシュボードやその他のいくつかのシナリオに役立ちます。SSE イベントは、基本的に Kafka Stream から消費された後、NodeJ または Spring Webflux によって応答されます。

これまでに行ったすべての簡単な例では、connectedcallback 中に要素が接続されていないという問題に直面することはありませんでした。

さらに、 「要素が接続されていない」ことに関するベスト プラクティスの推奨事項を読みませんでした。

私はいくつかの優れた議論を読みました:

can-a-custom-elements-connectedcallback-be-be-call-more-than-on-before-before-disc

このライフサイクル コンストラクター --> connectedCallback --> disconnectedCallback をいつでも信頼できることを学んだところから。

と

すべての子カスタム要素が接続されたときに「connectedCallback」を設定する方法

基本的に、「すべての子がアップグレードされた後に呼び出される」特定のメソッドがないことを学びました

両方の質問は私の質問に近いですが、私には答えません:どの課題またはリスクを認識すべきか、または「要素が接続されなくなったらconnectedCallbackが呼び出される可能性があります」という可能性を回避する方法は? 上記の私のシナリオで、不足している治療法はありますか? 要素が使用できなくなったときにトリガーするオブザーバーを作成して、eventsource オブジェクトを再作成し、そのような eventsource オブジェクトにリスナーを再度追加する必要がありますか?

イラスト用に以下のコードを貼り付けました。完全な Webcomponent の例は https://github.com/jimisdrpc/simplest-webcomponet から複製でき、そのバックエンドは https://github.com/jimisdrpc/simplest-kafkaconsumer から複製できます。

const template = document.createElement('template');
template.innerHTML = `<input id="inputKafka"/> `;

class InputKafka extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {

    this.attachShadow({mode: 'open'})
    this.shadowRoot.appendChild(template.content.cloneNode(true))

    const inputKafka = this.shadowRoot.getElementById('inputKafka');

    var source = new EventSource('http://localhost:5000/kafka_sse');

    source.addEventListener('sendMsgFromKafka', function(e) {
      console.log('fromKafka');
      inputKafka.value = e.data;
    }, false);

  }
  attributeChangedCallback(name, oldVal, newVal) {
    console.log('attributeChangedCallback');
  }

  disconnectedCallback() {
    console.log('disconnectedCallback');
  }

  adoptedCallback() {
    console.log('adoptedCallback');
  }
}

window.customElements.define("input-kafka", InputKafka);
4

2 に答える 2

4

カスタム要素が切断された後に が呼び出される唯一のケースconnectedCallback()は、カスタム要素を操作する場合です。作成後すぐに移動または削除すると、このような状況になることがあります。

説明した使用例で、永続的な単一ページ アプリケーションを使用して Web コンポーネントをホストしている場合、これは決して起こりません。実際には、ページが閉じられるまでカスタム要素が切断されることはありません。

于 2019-07-03T16:34:05.713 に答える