Blazor wasm JavaScript側で追加した要素内にRazorコンポーネントを表示する方法

Question

概要

Blazor WebAssembly Appにおいて、JavaScript側で新規追加したdiv要素の中にRazorコンポーネントを埋め込むようなことを実現したいです。良い方法があれば教えてください。

やろうとしていること：

1. 予めSample.razorのようなコンポーネントを用意
2. 初期ページ上ボタンクリックに応じてJavaScript関数を呼び出し
3. 呼び出されたJavaScript関数内でcreateElementによりdiv要素を追加
4. 上記で追加したdiv要素内にSample.razorコンポーネントを埋め込む

試したこと：

• 上記手順3.で追加したdiv要素に対してinnerHTMLを使用し、該当Razorコンポーネントの呼び出しタグ「'<Sample></Sample>'」を記載

→ 何も表示されず

• innerHTMLでiframe/object/embed等の要素を追記、razorコンポーネントへのパス（src='/sample'）を記載

→ Not Found（wasmであるため、サーバ要求したところで該当ページはレンダリングされていない）

環境

• Visual Studio 2019
• .NET 5
• Visual StudioからBlazor WebAssemblyテンプレートを使用してプロジェクト作成