외부 스타일 지정을 위한 part 및 exportparts

섀도 DOM의 엄격한 스타일 캡슐화는 사용자가 구성 요소 내부의 개별 요소 스타일을 다시 지정하지 못하게 합니다. CSS 변수는 전역 속성에는 사용할 수 있지만, 예를 들어 내부의 "닫기" 버튼에 사용자 지정 border-radius를 지정할 수는 없습니다. 파트가 이 문제를 해결합니다.

섀도 내부 요소에 part="name"을 표시하십시오. 그러면 사용자가 ::part(name) 의사 요소로 해당 요소를 대상으로 지정할 수 있습니다: my-dialog::part(close-button) { color: red; }. 이름이 지정된 요소는 스타일 지정 지점이 되고 나머지 섀도 트리는 캡슐화된 상태로 유지됩니다.

이름을 공백으로 구분하면 하나의 요소를 여러 파트로 노출할 수 있습니다: part="button primary". ::part(button)은 해당 요소를 일반적으로 대상으로 지정하고, ::part(primary)는 기본 스타일 요소로 대상으로 지정합니다. 각 이름은 독립적으로 일치합니다.

::part는 특정 의사 클래스(:hover, :focus, :disabled)만 허용하며, 하위 결합자나 추가 구조 선택은 허용하지 않습니다. ::part(card) p는 유효하지 않으며, 하위 선택자로 파트 내부에 접근할 수 없습니다.

사용자 지정 요소가 자체 섀도 안에 다른 사용자 지정 요소를 중첩하면 내부 요소의 파트는 일반적으로 외부 페이지에 노출되지 않습니다. 중첩된 요소에 exportparts="close-button"을 지정하면 해당 파트를 외부 호스트로 전달할 수 있습니다.

exportparts="close-button: dismiss"는 내부 파트를 외부 요소에서 사용할 새 이름으로 내보냅니다. 이를 통해 외부 구성 요소는 내부에서 어떤 요소를 조합하는지와 관계없이 깔끔한 이름 지정 표면을 제공할 수 있습니다.

사용자 지정 속성은 값(색상, 간격, 글꼴)을 노출합니다. 파트는 요소를 노출하며 CSS의 전체 스타일 지정 범위(테두리, 변환, 애니메이션)를 제공합니다. 전역 토큰에는 사용자 지정 속성을 사용하고, 개별 요소 수준의 사용자 지정에는 파트를 사용하십시오. 두 방법은 같은 구성 요소에서 함께 사용할 수 있습니다.

디자인 시스템에서는 가장 많이 사용자 지정되는 요소(버튼, 헤더, 표시기)에 사용할 소수의 파트와 색상, 간격, 타이포그래피를 위한 충분한 사용자 지정 속성을 노출하는 방식을 사용합니다. 사용자는 필요에 따라 값 수준이나 요소 수준에서 테마를 지정할 수 있습니다.

파트 이름은 구성 요소의 공개 API 일부가 되므로 이름을 변경하면 사용자의 CSS가 깨집니다. API가 구현이 발전해도 의미를 유지하도록 위치("first-button")가 아니라 요소의 역할("close-button", "header", "track")을 설명하는 이름을 선택하십시오.

사용 가능한 모든 파트와 내보낸 파트를 구성 요소의 README에 나열하십시오. 문서가 없으면 사용자는 파트를 찾기 위해 DOM을 검사해야 하며, 이는 우연히 발견한 요소에 사용자를 결합시킵니다. 파트 목록을 프레임워크 구성 요소의 속성 목록처럼 취급하십시오.

::part와 exportparts는 모든 최신 브라우저에서 제공됩니다. 이전 버전의 Safari도 이제 ::part를 지원합니다. 자유롭게 사용하십시오. 매우 오래된 브라우저(대부분 현재 사용되지 않음)에서는 추가 CSS 사용자 지정 속성을 대체 수단으로 사용하십시오.

exportparts 특성은 어떤 기능을 합니까?

part 특성은 ::part(name)을 통해 개별 섀도 요소를 외부 스타일 지정 대상으로 노출하여 캡슐화를 해치지 않고 CSS의 모든 스타일 지정 기능을 사용할 수 있게 합니다. exportparts는 중첩된 사용자 지정 요소의 파트를 외부 호스트로 전달하고 선택적으로 이름을 바꿉니다. 완전한 테마 지정 표면을 구성하려면 파트와 CSS 사용자 지정 속성을 함께 사용하고, 구성 요소 API의 일부로 파트 목록을 문서화하십시오.