Angular2 스터디 발표 자료
컴포넌트 스타일 지정 방법
- 쉐도우DOM선택자
- host
- host-context
- /deep/

1. 컴포넌트 스타일

  • @Component장식자 속성의 style에 스타일을 지정하면 컴포넌트 마다, 쉐도우 DOM에 독립적으로 스타일을 지정.
  • 다른 컴포넌트에는 스타일에 영향을 주지 않음
  • 쉐도우 DOM선택자의 종류
사용법 내용
:host 현재 컴포넌트의 쉐도우 DOM선택
:host-context 템플릿 외부 조건에 따라 현재 컴포넌트 선택
/deep/ 자식컴포넌트에 속한 엘리먼트 선택

2. :host 선택자

  • 현재 자신의 컴포넌트를 의미
:host{
  ....
}
  • 부모 컴포넌트의 조건에 따라 자식 컴포넌트의 상태를 결정할 경우 클래스 부여 가능
:host(.active){
  ....
}

3. :host-context 선택자

  • 부모 엘리먼트에 설정한 클래스 값에 따라 컴포넌트 내부에 특정 엘리먼트를 선택.
//부모
@Component({selector:'parent',template:'<child class="active"></child>'})

//자식
@Component({selector:'child',styles:[':host-context(.active)button{...}'])

4. /deep/ 선택자

  • 부모 컴포넌트에서 정의한 스타일 정보를 하위 컴포넌트 내의 엘리먼트에 적용.
:host /deep/ div{
  ....
}
//부모
@Component({selector:'parent',styles:[':host /deep/ div.first{...}'])

//자식
@Component({selector:'child',template:'<div class="first"></div>')