Что означает: host /deep/ selector?

пожалуйста, объясните прямо, что :host /deep/ означает:

:host /deep/ .ui-autocomplete {
  width: 85%;
}
14
angular css shadow-dom

1 ответов

он используется для стилизации дочерних компонентов при использовании emulated инкапсуляция вид.

подробнее об этом можно прочитать здесь:

https://angular.io/guide/component-styles

кстати /deep/ селектор теперь устарел:

комбинатор потомков теневого пирсинга устарел, и поддержка удаляется из основных браузеров и инструментов. Таким образом, мы планируем отказаться от поддержки в Angular (для всех 3 /deep/, >>> и:: ng-deep). До тех пор:: ng-deep следует предпочесть для более широкой совместимости с инструментами.

:host используется для обращения к элементу хостинга - это тот, который вы используете для добавления компонента где-то (например,<app-component>).

используйте селектор псевдо-класса :host для целевых стилей в элементе, в котором размещен компонент (в отличие от элементов таргетинга внутри шаблона компонента).

Итак, селектор :host /deep/ .ui-autocomplete означает "на текущем элементе хостинга углубитесь (поиск в дочерних компонентах тоже) и ищите элементы с классом ui-autocomplete.

вот некоторые дополнительные сведения о просмотре объектов заключение:

https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

15