Блог

Я разрабатываю компонент React / MaterialUI, который будет встроен в существующие веб-сайты.

Чтобы свести к минимуму работу, необходимую на существующей странице для встраивания моего компонента, я объединяю свой компонент в app.js и единственное изменение, запрошенное для существующей страницы, это что-то вроде:

 <div id="embedded-component"></div>
<script type="text/javascript" src="https://example.com/app.js"></script>
  

мой компонент находит div по идентификатору и затем монтирует этот элемент.

В основном все работает, но у меня возникают проблемы с CSS-конфликтами между CSS-файлами на исходной странице (которые я не могу изменить) и элементами моего приложения.

Например, исходная страница использует элементы ввода текста с рамкой / отступом / цветом, которые я не хочу, чтобы мой компонент «наследовал». Я хочу, чтобы мой компонент отображался одинаково, независимо от того, на какой странице он встроен.

Есть ли какая-либо стратегия / инструмент для использования в этом случае, чтобы классы CSS на существующей странице не влияли на элементы моего встроенного компонента?

Пытаясь найти решение этой проблемы, я наткнулся на Shadow DOM (например https://medium.com/rate-engineering/winning-the-war-of-css-conflicts-through-the-shadow-dom-de6c797b5cba ) но я не уверен, насколько широко это поддерживается в разных браузерах.

Есть ли какое-либо решение для этого, которое широко поддерживается всеми основными браузерами?

Я не могу использовать iframes и иметь полный контроль над своими файлами js / css, но не могу контролировать существующую страницу, кроме «монтируемого» div.