Webcomponents 에서 css사용

css code

host가 open이라는 속성을 가질때 다음과 같이 정의한다.

:host([open]) {
	display:block
}

 

host가 main이라는 클래스를 가지고,  내부 slot에 배치된 slot이라는 클래스개체의 스타일을 정의하고 싶을때는 다음과 같습니다.

:host(.main){
  background: blue;
  ::slotted(.slot){
  	background: red;
  }
}

 

host 내부 콘텍스트가 div에 스타일을 적용하고 싶을때는 다음과 같습니다.

:host-context(div){
	color:yellow;
}

 

 

참 쉽죠?