Skip to content

3. 뷰 캡슐화

Angular에서는 컴포넌트에 적용된 CSS 스타일이 컴포넌트 뷰를 대상으로 캡슐화되기 때문에 애플리케이션에 있는 다른 컴포넌트에 영향을 주지 않는다.


이 캡슐화 정책은 컴포넌트마다 다르게 지정할 수 있으며, 정책은 컴포넌트 메타데이터에 뷰 캡슐화 모드를 지정하면 변경할 수 있다.


뷰 캡슐화 모드는 이런 것들이 있다:


  • ShadowDom: 브라우저 기본 섀도우 DOM을 활용해서 뷰를 캡슐화 한다. 섀도우 DOM에 대해 자세하게 알아보려면 Shadow DOM 문서를 참고한다. 이 모드를 사용하면 컴포넌트 템플릿이 섀도우 DOM 형태로 컴포넌트 호스트 엘리먼트에 들어간다.
  • Emulated: (기본값) 컴포넌트에 CSS 코드를 추가해서 섀도우 DOM처럼 캡슐화한다. 자세한 내용은 자동생성된 CSS 확인하기 섹션을 참고한다.
  • None: 뷰 캡슐화를 하지 않는다. 컴포넌트에 지정한 스타일은 컴포넌트 뿐 아니라 전역 범위에 적용된다. 컴포넌트는 캡슐화되지 않으며, HTML 문서에 직접 컴포넌트 스타일을 지정한 것과 같은 효과를 낸다.


컴포넌트 캡슐화 모드를 설정하려면 컴포넌트 메타데이터의 encapsulation 프로퍼티를 지정하면 된다:


src/app/quest-summary.component.ts
// 주의: 현재 모든 브라우저가 shadow DOM을 지원하지는 않습니다.
encapsulation: ViewEncapsulation.ShadowDom;


ShadowDom 모드는 브라우저가 섀도우 DOM을 지원할 때만 정상 동작한다. 지원하는 브라우저 목록을 확인하려면 Can I use 사이트의 Shadow DOM v1 문서를 참고한다. 섀도우 DOM은 아직 모든 환경에 사용할 수 없기 때문에 Emulated 모드가 기본값이다.


1. 자동생성된 CSS 확인하기

뷰 캡슐화 정책을 Emulated 모드로 지정하면 Angular는 모든 컴포넌트 스타일을 전처리해서 표준 섀도우 CSS 규칙과 비슷하게 변환한다.


그래서 Angular 애플리케이션을 실행한 후에 DOM을 확인해보면 각 DOM 엘리먼트에 어트리뷰트가 조금씩 더 붙어있는 것을 볼 수 있다:


<hero-details _nghost-pmm-5>
  <h2 _ngcontent-pmm-5>Mister Fantastic</h2>
  <hero-team _ngcontent-pmm-5 _nghost-pmm-6>
    <h3 _ngcontent-pmm-6>Team</h3>
  </hero-team>
</hero-detail>


이렇게 생성되는 어트리뷰트는 두 종류로 구분할 수 있다:


  • 섀도우 DOM의 호스트가 되는 엘리먼트는 _nghost 어트리뷰트가 붙는다. 그래서 Angular 컴포넌트의 호스트 엘리먼트도 이 어트리뷰트가 붙는다.
  • 컴포넌트 안에 있는 엘리먼트에는 _ngcontent 어트리뷰트가 붙는다. 이 어트리뷰트는 섀도우 DOM의 동작을 흉내내기 위해 붙는다.


어트리뷰트가 정확히 어떤 이름인지는 중요하지 않다. 이 어트리뷰트는 Angular가 자동으로 생성하는 것이지 애플리케이션 안에서 참조하는 값이 아니다. 만약 이미 생성된 컴포넌트 스타일을 대상으로 스타일을 지정해야 한다면 <head> 태그에 이런 코드를 작성할 수도 있다:


[_nghost-pmm-5] {
  display: block;
  border: 1px solid black;
}

h3[_ngcontent-pmm-6] {
  background-color: white;
  border: 1px solid #777;
}


이 코드에서 참조한 _nghost, _ngcontent 어트리뷰트 셀렉터는 Angular가 이미 처리하고 난 후에 생성된 것이다. Angular 애플리케이션이 다시 빌드되면 변경될 수 있다.

References