Shadow DOM 스타일

:host {...}

쉐도우 돔 전체를 감싼다.

template: `

엄마<br>

<div>딸</div>

`,

styles: [`

:host {

display: block;

border: 2px solid #000;

width: 300px;

}

`]

결과로 border 2픽셀 짜리 검정 실선이 엄마부터 딸까지 전부를 감싼다.

:host(.className) { ... }

부모컴퍼넌트에 쓰인 자신의 컴퍼넌트 클래스명에 의해 스타일이 변경

부모

selector: 'parent',

template: `

엄마<br>

<child class="smile"></child>

`,

styles: [`

:host {

display: block;

border: 2px solid #000;

width: 300px;

}

`]

자식

selector: 'child',

template: `

<span>딸</span>

`,

styles: [`

:host(.smile) {

display: block;

border: 2px solid blue;

width: 270px;

}

`]

마우스 반응에 따른 스타일 변경

:host(:hover) 마우스오버

:host(:click)   마우스 클릭
:host(:active) 엘리먼트 활성화

:host-context {...}

부모에 설정한 클래스 값에 의해 자신 내부의 특정 엘리먼트의 스타일을 변경한다.

부모

selector: 'parent',

template: `

엄마<br>

<div class="parent">

<child class="smile"></child>

</div>

`,

styles: [`

:host {

display: block;

border: 2px solid #000;

width: 300px;

}

`]

자식

selector: 'child',

template: `

<span>딸</span>

`,

styles: [`

:host-context(.parent) span {

display: block;

border: 2px solid red;

width: 270px;

}

`]

/deep/

부모 컴퍼넌트에 있는 엘리먼트 뿐만 아니라 자식 컴퍼넌트에도 동일한 클래스명이 있다면 전부 적용

:host /deep/ div.parent { ... }

개인적으로 공부하며 기억하기 위해 작성한 포스팅입니다.

이득을 위하여 작성된 포스팅이 아님을 알려드립니다.