Blazor in WebComponent

[T-mp]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I want to use Blozor in a web component (preferably in the shadow DOM, closed), but the bootloader loads everything into the global window.DotNet and window.Blazor. And Blazor is then also initialised there.
Such a web component can never be used in a Blazor application, as soon as it is not hosted in the same.
Similarly, two (or more) web components from different sources cannot be used at the same time.

Translated with www.DeepL.com/Translator (free version) from German
Ich möchte Blozor in einer Web-Component (möglichst im shadow-DOM, closed) verwenden, aber der Bootloader läd alles in das globale window.DotNet und window.Blazor. Und dort wird Blazor dann auch initialisiert.
Eine Solche Web-Componente kann nie in einer Blazor-Anwendung verwendet werden, so bald sie nicht in der selbigen gehostet wird.
Ebenso können keine zwei (oder mehr) Web-Componenten aus verschiedenen Quellen gleichzeitig verwendet werden.

Describe the solution you'd like

A way to create a web component in which the necessary scripts are loaded within the component and all dependencies are loaded relative to the source of the component. (Example relative loading: Including page is on server A, component is on server B => resources are loaded from server B).
For isolation, I would like the web component to use the shadow DOM with mode=closed.

Usage/Integration:

<script type="module" src="(absolute or relative) path/to-module-file.js"></script>
[...]
<component-name></component-name>

(German)
Eine Möglichkeit eine Web-Komponente zu erstellen in der die notwendigen Skripte innerhalb der Komponente geladen werden und alle Abhängigkeiten relativ zur Quelle der Komponente geladen werden. (Beispiel relatives Laden: Einbindende Seite liegt auf Server A, Komponente liegt auf Server B => Ressourcen werden vom Server B geladen)
Zur Isolierung würde ich es begrüßen, wenn die Web-Komponente den Shadow-DOM mit mode=closed verwenden würde.

Verwendung / Einbindung:

<script type="module" src="(absoluter oder relativer) Pfad/zur-Modul-Datei.js"></script>
[...]
<komponenten-name></komponenten-name>

Additional context

Hints:

• With script type="module", the origin of the component can be determined via "import.meta.url".
• If shadow DOM with mode=closed is problematic, mode=open would be acceptable for the time being ;-)

(German)
Hinweise:

• Mit script type="module", kann per "import.meta.url" die Herkunft der Komponente ermittelt werden.
• Wenn Shadow-DOM mit mode=closed problematisch ist, wär vorerst mode=open akzeptabel ;-)

[mkArtakMSFT]

Thanks for contacting us. This seems to be a dupe of #38128

[MackinnonBuck]

We recommend loading the blazor.*.js script once (e.g. in index.html) and not for each Blazor custom element. Here's the docs topic for custom elements.

[T-mp]

@mkArtakMSFT
Yes, depending on the implementation of #38128 it could solve our problem.
Requirement the implementation allows several independent Blazor-WebComponents.
I will leave a comment there.
Thanks for the hint. Based on the title, I assumed there would be major differences between the use cases. (In our scenario, Blazor Server is not mandatory)

@MackinnonBuck
We are aware that it usually makes sense to load the blazor.*.js only once.
But in our scenario, there are several manufacturers of web components who want to host them separately and use Blazor. Integrated in just one web application. Here it would be advantageous, if the individual Blazor-WebComponents were independent of each other.