我正在开发一个React / MaterialUI组件，该组件将嵌入现有网站中。
为了最大程度地减少在现有页面上嵌入组件所需的工作，我将组件捆绑到app.js中，对现有页面的唯一更改要求是：
<div id="embedded-component"></div>
<script type="text/javascript" src="https://example.com/app.js"></script>
我的组件按ID查找div，然后将其安装在该元素上。
大多数情况下都可以正常工作，但是我遇到了原始页面（无法修改）的CSS文件与应用程序元素之间的CSS冲突问题。
例如，原始页面使用带有边框/填充/颜色的文本输入元素，而我不希望组件“继承”。 无论嵌入哪个页面，我都希望我的组件以相同的方式显示。
在这种情况下是否有任何策略/工具可以使用，因此现有页面上的CSS类不会影响嵌入式组件的元素？
试图找到解决方案，我遇到了Shadow DOM（例如https://medium.com/rate-engineering/winning-the-war-of-css-conflicts-through-the-shadow-dom-de6c797b5cba），但不确定在不同的浏览器中对此的支持程度。
对此是否有所有主流浏览器都广泛支持的解决方案？
我无法使用iframe，无法完全控制我的js / css文件，但除了“ mounting” div之外，无法控制现有页面。