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

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

0 голосов
/ 29 июня 2018

Я создал веб-компонент, используя 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"
]

1 Ответ

0 голосов
/ 29 июня 2018

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

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