Как использовать :: slotted внутри режима ViewCapsulation.ShadowDom в Angular? - PullRequest
Новая
       42

Как использовать :: slotted внутри режима ViewCapsulation.ShadowDom в Angular?

6 голосов
/ 04 июля 2019

Я добавил ::ng-deep комбинатор для ссылки на проецируемый контентный элемент в моем компоненте. Но когда я переключился из режима по умолчанию (ViewEncapsulation.Emulated) в режим ViewEncapsulation.ShadowDom, очевидно, ::ng-deep не являлся родным селектором Shadow DOM, старый CSS не работал. 

/* This works in ViewEncapsulation.Emulated */
:host ::ng-deep .course-description {
  max-width: 360px;
  margin: 0 auto;
  margin-top: 15px;
  user-select: none;
}

Удивительно, но когда я использую /deep/ комбинатор (который удален в Chrome v63 https://developers.google.com/web/updates/2017/10/remove-shadow-piercing) работает нормально для ViewEncapsulation.ShadowDom в Chrome v75.0.3770.100 

/* This works in ViewEncapsulation.ShadowDom */
:host /deep/ .course-description {
  max-width: 360px;
  margin: 0 auto;
  margin-top: 15px;
  user-select: none;
}

Можно ли использовать ::slotted() внутри CSS компонента, чтобы он работал как прежде, но в режиме ViewEncapsulation.ShadowDom? Если да, то как?

1 Ответ

1 голос
/ 15 июля 2019

Вам не повезло. :: slotted не поддерживается .Emulated. Однако это поддерживается. Native

ng-deep также устарела и на самом деле, пока нет плановой замены.

Пронзительный теневой комбинатор устарел, и поддержка удаляются из основных браузеров и инструментов. Как таковые мы планируем отказаться поддержка в Angular (для всех 3 of / deep /, >>> и :: ng-deep).

Я все еще не уверен, работают ли они над решением или просто хотят, чтобы мы забыли об этом.

...