Предотвращение перезаписи CSS из веб-компонентов на родительской странице

Question

Я создал веб-компонент, используя Angular Elements (6.0.3). Когда я использую веб-компонент на другом веб-сайте, веб-компонент перезаписывает стили родительской страницы, поскольку он также использует Bootstrap. Я знаю, что существует принцип инкапсуляции представлений, но, насколько мне известно, "нативная" инкапсуляция еще не полностью поддерживается. Так что на данный момент я использую по умолчанию "Эмуляция".

Я узнал, что если я добавлю :host ::ng-deep перед моими стилями они применяются только к самому веб-компоненту, и это здорово. Однако все файлы css и scss, которые я загружаю в angular.json, также перезаписывают родительскую страницу. Есть ли способ, как я могу предотвратить это поведение из импортированных файлов стилей?

Мой стиль-импорт в angular.json:

"styles": [
  "node_modules/intl-tel-input/build/css/intlTelInput.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/angular-calendar/css/angular-calendar.css",
  "src/styles.scss",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "src/assets/css/wizard.css",
  "src/assets/css/calendar.css",
  "src/assets/css/ng2-select.css"
]

Answer 1

Импорт 'styles' в angular.json предназначен для стилей, которые вы хотите определить глобально для всего приложения. Использовать ViewEncapsulation вам нужно будет связать их таблицы стилей внутри их компонентов следующим образом:

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
})