WebComponentの子要素を表示するメソッド

Question

React への依存関係を取り除くために、React コンポーネントを WebComponent に再構築しようとしています。

次のような WebComponent を HTML で見たいです:

<editable-h1>Hello,world</editable-h1>

次のようになります:

<span>
  <h1>こんにちは、世界</h1>
  <button onClick=this.onEdit>編集</button>
</span>

編集ボタンをクリックすると、次のように表示されます:

<form>
  <input type='text' value='Hello, world'></input>
  <button onClick=this.onSave>保存</button>
</form>

[保存] ボタンをクリックすると、API 呼び出しを通じて変更がデータベースに保存され、元のレンダリングに戻ります (ただし、テキストは編集済みです)。

レンダリングの切り替えと API 呼び出しは処理できると思いますが、レンダリングのために最初の WebComponent から子要素のテキスト「Hello, world」を取得する方法がわかりません。

Answer 1

open tag<editable-h1> で connectedCallback イベントをトリガーします つまり、あなたの

Hello World

の innerHTML は解析されていません 解析が完了するまで待ってから実行するには、

setTimeout

を使用します。 注:

parsedCallback

を提供するすべてのツールとライブラリは、requestAnimationFrame または MutationObserver を使用して、内部で同様のトリックを使用します (さらに多くの行があります)コード）。

setTimeout

の 1 行がハッキングだと思う場合、または setTimeout を使用して ミリ秒を無駄にしたくない場合は、# をチェックしてください。 ##Andrea Giammarchi の HTML 解析要素コード (もちろん、読み込みと解析が必要であり、依存関係とコードの複雑さも増加するため、全体的に時間がかかります) WC の専門家に従って、この議論は続きます:

子要素が変更された後、または解析が完了した後に実行するコールバック関数が必要です

https://github.com/WICG/webcomponents/issues/809 すべてのメソッドは同じ目標に要約されます:

イベント ループが空になるまで待機します

イベントループとは何ですか? https://www.youtube.com/watch?v=8aGhZQkoFbQ

リーリー リーリー