We have main big application and are going to create separate small applications (microservices) using different libraries (Angular, React etc.) and compile them into webcomponent to use them anywhere. The main application has some libraries (example underscore.js), some of our components use the same libraries (example lodash.js), in this scenario we see a lot of conflicts when using webcomponents inside main application. Do you have any ideas on how can we isolate webcomponent libraries and they can work in isolated mode. Also we have used ShadowDOM, but no luck.
There's no such isolated mode shipped with the Web Components technologies. All imported libraries will share the same namespace.
Shadow DOM is not about Javascript code isolation but only deals with DOM et CSS isolations.
If you want to resolve conflicts with imported 3rd-party libraries you could either:
Design your website to import 3rd-party import only once, in a global dependency script.
Use a module loader that will manage library loading for you, for example require.js, or the built-in feature ES6 module import feature, or even your own Vanilla module loader.
Isolate the different parts of you site with <iframe>elements (if possible, but you may loose some interaction features).
All these solutations have advantages and drawbacks. It depends on your needs.