Мы создали виджет с Angular 4, который можно интегрировать с любым сайтом.Но если хост-сайт использует Bootstrap CSS, это нарушает наш пользовательский интерфейс виджета.
Когда мы создаем наш виджет в Angular 4, мы получаем следующие файлы, которые мы называем на хосте index.html
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
<link href="styles.bundle.css" rel="stylesheet"/>
Например, хост index.html выглядит следующим образом.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ChatWidget</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="styles.bundle.css" rel="stylesheet"/></head>
<body>
<!--other host website content-->
<app-widget></app-widget>
<script type="text/javascript" src="nline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
Поэтому мой вопрос заключается в том, как я могу предотвратить загрузку CSS Bootstrap с моим стилем виджетов.
Пример взлома пользовательского интерфейса
||с начальной загрузкой
||без начальной загрузки
