Как стиль ng-content - программирование

Однако не упоминается, как стилизовать элементы, которые в конечном итоге заменяют ng-контент.

Похоже, что я могу настроить таргетинг только на этот элемент в css, если он предшествует ключевому слову /deep/, который обычно используется при таргетинге на вложенный компонент. Это верно?

Ответы

Ответ 1

Обновить

::slotted теперь поддерживается всеми новыми браузерами и может использоваться с 'ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

оригинал

::content xxx {... } может также работать или :host xxx {... }. Шимминг не очень строг или точен. AFAIK (>>> /deep/ old) ::ng-deep (поддерживается SASS) и пробел в настоящее время делают то же самое.

Ответ 2

Содержимое внутри <ng-content> изолировано от компонента. Он не может видеть атрибуты компонента или стиль.

Если вам нужно стилизовать его, а иногда и вы, у вас есть два варианта:

1. Просто напишите CSS

Вы можете создать обычный файл CSS и создать такой контент. Вы почти наверняка используете тень DOM polyfill. Обычный CSS будет видеть через polyfill и просто стильный элемент. Скажем, у вас есть панель приложений. Вы можете написать:

app-sidebar p {
  color:red;
}

Если вы используете ng-cli, любые правила, которые вы пишете в style.scss, будут глобальными.

2. Используйте: host/deep/selector

Если вы хотите использовать тень DOM polyfill и стилируйте свои компоненты с помощью атрибута style или styleUrls декоратора Component, выберите элемент с :host, затем проигнорируйте тень DOM polyfill с дочерним селектором /deep/.

:host выберет элемент.
/deep/ будет выбирать элементы, не добавляя селектор атрибутов DOM макета тени к вложенным селекторам.

Объедините их, и вы можете выбрать все элементы, вложенные внутри элемента компонента хоста, независимо от того, где они объявлены.

так:

:host /deep/ p {
  color:red;
}

Ответ 3

Это решило мою проблему

::ng-deep {
    & > * {
         // styles here
    }
}