Embed JavaScript and let it use local CSS

Question

I've created a simple html web page using bootstrap. I've also created a "nice looking" form with Svelte that also uses bootstrap.

The svelte form is hosted on another server/domain. I embed it on my html page by placing a -Tag and than placing my custom html tag where I want to see it.

Embedding the form is no problem, technically everything works but: I would like to remove the bootstrap library from the component because otherwise I load bootstrap twice.

When I remove bootstrap from the form, it loses its style. Using the "refer" option in is no solution.

Do you have any idea how I can make the embeded form use the bootstrap css from the page that it is embeded on?

Answer 1

I just found out that the problem is the so called "Shadow DOM", which is used by Svelte. It protects the svelte component from being modified by global css.

At the moment there is no official way to disable the Shadow DOM:(