본문 바로가기
공부하기

Webcomponents 에서 css사용

by 날아라못난 2024. 1. 2.
728x90
반응형

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

 

 

참 쉽죠?

728x90
반응형

'공부하기' 카테고리의 다른 글

[Stencil]토글가능한 Expander UI만들기  (0) 2024.01.04
[Stencil]컴포넌트 구성 셋  (0) 2024.01.03
[Stencil]Web components API  (0) 2024.01.03
web components :part()  (0) 2024.01.03
[Stencil]Stenciljs 프로젝트 시작하기  (2) 2024.01.02