Что использовать вместо :: ng-deep

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

Из большинства ответов я вижу, что мне следует использовать ::ng-deepселектор, но из документов Angular он устарел. Есть альтернатива ::ng-deep?

FWIW В своем исследовании я не нашел замены ng-deep или другим подходящим альтернативам. Это связано с тем, что, как я полагаю, команда Angular придерживается спецификации W3C в отношении теневого объекта, который изначально имел такие селекторы, как deep. Однако с тех пор W3c удалил эту рекомендацию, но не заменил ее новой. До тех пор, пока этого не произойдет, я полагаю, что команда Angular сохранит, ::ng-deepи его альтернативы будут доступны, но в устаревшем состоянии из-за состояния ожидания черновиков W3C. Я не могу найти время, чтобы найти документацию, подтверждающую это прямо сейчас, но я видел это недавно.

Короче говоря: продолжайте использовать ::ng-deepи его альтернативы до тех пор, пока не будет создана замена - отказ от поддержки - это всего лишь раннее уведомление, чтобы люди не остались в стороне, когда реальное изменение материализуется.

- ОБНОВЛЕНИЕ -

https://drafts.csswg.org/css-scoping-1/ Вот черновик предложения, если вам интересно. Похоже, что они работают над надежным набором селекторов для элементов в теневом дереве; именно эта спецификация, после утверждения, я думаю, проинформирует клон angular, если он вообще есть (то есть angular может не потребоваться реализовывать свои собственные селекторы, как только они появятся в браузерах).

Чтобы обойти устаревшее ::ng-deep, я обычно отключаю ViewEncapsulation. Хотя это не лучший подход, он сослужил мне хорошую службу.

Чтобы отключить ViewEncapsulation, сделайте в своем компоненте следующее:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class HeaderComponent {

}

Это сделает стили .scss в этом компоненте глобальными для всего приложения. Чтобы стили не переходили вверх по цепочке к родительским и родственным компонентам, оберните весь scss селектором следующим образом:

app-header {
  // your styles here and any child component styles can go here
}

Теперь стили, указанные здесь, перейдут к дочерним компонентам, поэтому вы должны быть более конкретными с вашими селекторами css и учитывать свои p и q при добавлении CSS (возможно, добавьте дочерний селектор, указанный в вашем приложении Angular, а затем его стили).

Я говорю, что это не лучший подход из-за параграфа выше, но он мне хорошо послужил.

Простая и легкая альтернатива глубокому стилю - это общий стиль, использующий селектор элементов родительского компонента. Итак, если у вас есть это в hero-details.component.css:

:host ::ng-deep h3 {
  font-style: italic;
}

Это будет в styles.css:

app-hero-details h3 {
  font-style: italic;
}

По сути, глубокий стиль - это неинкапсулированный стиль, поэтому он концептуально кажется мне больше общим стилем, чем стилем компонента. Лично я бы больше не использовал глубокие стили. Критические изменения являются нормальным явлением в обновлениях основных версий, а удаление устаревших функций - это честная игра.

Как кто-то сказал ранее, если вы используете стороннюю библиотеку, практически невозможно избежать ее использования ::ng-deepвремя от времени. Но что вы собираетесь делать со своими предыдущими проектами, когда они ::ng-deepбольше не поддерживаются браузерами?

Чтобы быть готовым к этому моменту, я предлагаю следующее:

1. Используйте ViewEncapsulation.None с умом. Что означает только те компоненты, которым требуется доступ к более глубоким компонентам.

@Component({
      selector: 'app-example',
      templateUrl: './example.component.html',
      styleUrls: ['./example.component.scss'],
      encapsulation: ViewEncapsulation.None
    })

2. Теперь, чтобы избежать коллизий и странностей CSS, вы должны (как правило) всегда заключать в шаблон вашего компонента класс. Итак, example.component.html должен выглядеть так:

<section class="app-example-container">
<!-- a third party component -->
<mat-tab-group>
<mat-tab label="First"></mat-tab>
<mat-tab label="Second"></mat-tab>
</mat-tab-group>
</section>

3. Опять же, по правилу, первая строка каждого файла SCSS будет нацелена на контейнер компонента. Поскольку инкапсуляции нет, вы можете изменять сторонний компонент, ориентируясь на их классы. При этом example.component.scss должен выглядеть так:

.app-example-container {
/* All the CSS code goes here */
.mat-tab-group .mat-tab-label {color: red;}
}

Это не общая замена :: ng-deep, а вариант использования, описанный автором вопроса:

В особом случае, когда вы хотите стилизовать элемент, вставленный маршрутизатором-выходом, есть элегантное решение, использующее соседний селектор соседей в CSS:

router-outlet+* {
  /* styling here... */
}

Это будет применяться ко всем элементам, которые являются непосредственными соседями маршрутизатора-розетки.

Дополнительная литература:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

Чтобы избежать изменения инкапсуляции по умолчанию, я написал помощник, добавляющий глобальные стили для компонента:

deepStyle.ts

import { ViewContainerRef } from '@angular/core';

export function deepStyle(vcr: ViewContainerRef, csss: string[]){
    let id = 'deep-' + vcr.element.nativeElement.tagName;
    let styleElement = document.getElementById('pierce-' + vcr.element.nativeElement.name);
    if(!styleElement){
        styleElement = document.createElement('style');
        styleElement.id = id;
        styleElement.innerHTML = csss.map(css => vcr.element.nativeElement.tagName + ' ' + css).join('\n');
        document.head.append(styleElement);
    }
}

мой-component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { deepStyle } from '../deepStyle';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
   constructor(vcr: ViewContainerRef) {
    deepStyle(vcr, [`
       img {
         height: 180px;
       }
    `]);
  }
}

результат:

<head>
...
<style id="deep-MY-COMPONENT">
    MY-COMPONENT img {
      height: 180px;
    }
</style>
...
</head>

Вы можете использовать "/ deep /". Это :: глубокая альтернатива.

:host /deep/ h3 {
  font-style: italic;
}