:: ng-deep 대신 사용할 것

라우터 콘센트에 배치 된 요소를 각도로 스타일링하고 생성 된 요소의 너비가 100 %인지 확인하고 싶습니다.

대부분의 답변에서 ::ng-deep선택기를 사용해야한다는 것을 알지만 Angular의 문서 에서는 더 이상 사용되지 않습니다. 에 대한 대안이 ::ng-deep있습니까?

FWIW 내 연구에서 ng-deep 또는 기타 적용 가능한 대안에 대한 대체품을 찾지 못했습니다. 이것은 Angular 팀이 처음에 .NET Framework와 같은 선택기가 있었던 shadow dom의 W3C 사양을 연기하고 있기 때문 deep입니다. 그러나 W3c는 이후 권장 사항을 제거했지만 새 권장 사항으로 대체하지는 않았습니다. 그렇게 될 때까지 Angular 팀은 계속 ::ng-deep사용할 수 있고 대안을 사용할 수 있지만 W3C 초안의 보류 상태로 인해 더 이상 사용되지 않는 상태입니다. 지금은이를 백업 할 문서를 찾는 데 시간을 할애 할 수 없지만 최근에 확인했습니다.

간단히 말해서 : ::ng-deep교체가 생성 될 때까지 및 그 대안을 계속 사용하십시오. 사용 중단은 실제 변경 사항이 구체화 될 때마다 사람들이 눈을 멀게하지 않도록 초기 알림 일뿐입니다.

- 업데이트 -

https://drafts.csswg.org/css-scoping-1/ 관심이있는 경우 제안 초안이 있습니다. 그들은 Shadow dom 트리 내의 요소에 대한 강력한 선택기 세트를 작업하고있는 것으로 보입니다. 일단 승인되면이 사양이 앵귤러 클론이있는 경우이를 알릴 것이라고 생각합니다 (즉, 앵귤러가 브라우저에서 실행되면 자체 선택기를 구현할 필요가 없습니다).

더 이상 사용되지 않는 ::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 스타일이 전체 응용 프로그램에 전역으로 적용됩니다. 스타일이 상위 및 형제 구성 요소로 연결되는 것을 허용하지 않으려면 전체 scs를 다음과 같이 선택기로 래핑합니다.

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

이제 여기에 지정된 스타일은 하위 구성 요소로 내려가므로 CSS 선택기를 추가로 구체적으로 지정하고 CSS를 추가 할 때 p와 q를 염두에 두어야합니다 (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);
    }
}

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