web components :part()

part의 값을 정의하여 사용하면 CSS가 ::part 요소를 통해 쉐도우 트리의 특정 요소를 선택하고 스타일을 지정할 수 있습니다.

 

하지만 사파리에서 호환이 어렵다는 문제가 있어요(exportparts)

 

css는 다음과 같이 사용하고

:host{
  &::part(part){
    	color:red;
  }
}

 

웹컴포넌트에서 사용은

<ds-button part="part">파트 버튼</ds-button>

 

 

아래와 같이 exportparts도 사용할 수 있지만 사파리에서 적용이 안됩니다.

쉐도우 돔 하위 요소의 스타일을 지정할 때 사용하지만 호환이 안된다는 단점이 있어서 사용을 안하고 있어요

<ds-button exportparts="part">파트 버튼</ds-button>