Що використовувати замість :: 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 може не знадобитися реалізовувати власні селектори, як тільки це з’явиться у браузерах).

Щоб обійти застаріле ::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 . Ніхто не мудро. Що означає лише для тих компонентів, яким потрібно отримати доступ до більш глибоких компонентів.

@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);
    }
}

my-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 /". Це :: ng-deep альтернатива.

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