問題タブ [native-web-component]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 「要素が接続されなくなったらconnectedCallbackが呼び出される可能性があります」Webコンポーネントのコーディング方法
私の質問に貼り付けられたステートメントは、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 から複製できます。
javascript - Vanilla WebComponents のアプローチ:「html から js をインポートする」ファイルと「js から html を取得する」ファイルの間に実際の違いはありますか
コンテキスト: 今まで、私はいつも小さな HTML コードを書いていたので、テンプレート HTML ファイルをバニラ Web コンポーネントにインポートする方法について気にしませんでした。したがって、webcomponent .js ファイルの上に html をコーディングし、次のようにします。
これは、チュートリアル、ブログ、およびフォーラムでよく見られるものです。これでプロジェクトツリーがより明確になると仮定して、htmlをjavascriptから分離したいと思います。
周りを検索すると、ブラウザで「インポート」がサポートされなくなるという仮定に基づいたいくつかの議論が見つかりました[(インポートの代替案については、下部の UPDATE の議論を参照してください)]。1
基本的に、これは私を2つの可能性に駆り立てました：
1 - .js ファイルを html から html にインポートする例:
2 - .js ファイルから my-webcomponent.html を非同期的にフェッチする
2017 年のこのような議論に基づくと、オプション 1 を避けるべきだと思われますが、その理由と、オプション 2 に実際の利点があるかどうかは明確ではありません。ネイティブ Web コンポーネント (Chrome など) をサポートするブラウザによって直接レンダリングされることが期待される Vanilla Web コンポーネントのコーディング中に html ファイルを「フェッチ」しますか?