html - 将 React 组件添加到现有网页并避免 CSS 冲突

我正在开发一个将嵌入现有网站的 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 文件，但无法控制除了“安装”div 之外的现有页面。

标签： htmlcss