2 Shadow DOMs in one HTML page

I want to create/inject/set two Shadow DOMs in one Angular app with both CSS and js per each.

For the CSS - I know how to isolate it.

For the js - I have a collision with both variables and functions names.

Any idea?

index.html:

index.html

index2.html

index2.html

  1. I make HTTP req in order to get the HTML files (with CSS and js).
  2. create a shadow dow per each
  3. append the file to the shadow dom
  4. and I'm getting this error

Error:

error