Shadow DOM 내부의 범위 지정 스타일

섀도 루트 내부의 모든 <style> 규칙은 해당 루트 내부에만 적용됩니다. 섀도 트리의 p { color: red }는 해당 섀도 내부의 문단만 빨간색으로 만들며, 기본 문서의 문단에는 영향을 주지 않습니다. 또한 기본 문서의 스타일은 섀도 내부로 들어가지 않습니다.

캡슐화는 수십 년 동안 대규모 애플리케이션을 괴롭혀 온 전역 CSS 문제를 없앱니다. 구성 요소의 스타일은 사이트 CSS에 의해 실수로 재정의될 수 없고, 구성 요소 역시 실수로 사이트를 망가뜨릴 수 없습니다. 이 경계는 관례가 아니라 사양으로 정의됩니다.

섀도 내부에서는 :host를 사용하여 호스트 요소의 스타일을 지정합니다. 선택자에 따라 범위를 지정하려면 :host(selector)를 사용하십시오: :host([open]) { display: block; }은 호스트에 open 특성이 있을 때만 호스트와 일치합니다.

상속되는 CSS 속성(color, font-family, line-height)은 상속을 통해 여전히 섀도 경계를 넘습니다. 문서에서 body { color: blue }를 설정하면 섀도에서 명시적으로 재정의하지 않는 한 섀도 텍스트도 파란색이 됩니다. 이 기능 덕분에 타이포그래피 기본값을 일관되게 유지할 수 있습니다.

사용자 지정 속성(CSS 변수)은 섀도 루트를 통해 상속되므로 구성 요소의 테마 지정 API를 노출하는 표준적인 방법이 됩니다. 섀도 내부에 --card-bg: var(--surface, white)를 선언하고, 사용자가 호스트에서 --surface를 재정의하도록 하십시오.

섀도 내부 요소에 part="name"을 표시하면 사용자가 my-card::part(name) { ... }를 사용하여 해당 요소의 스타일을 지정할 수 있습니다. 섀도 트리의 대부분은 캡슐화된 상태로 유지하면서 개별 스타일 지정 지점이 필요할 때 파트를 사용하십시오.

shadowRoot.adoptedStyleSheets = [sheet]을 사용하면 하나의 CSSStyleSheet를 여러 섀도 루트에서 공유할 수 있어 반복적인 <style> 구문 분석을 피할 수 있습니다. new CSSStyleSheet()로 시트를 구성하고 sheet.replaceSync(cssText)로 설정하십시오. 디자인 시스템에서 성능이 크게 향상됩니다.

섀도 innerHTML의 맨 위에 <style> 태그를 배치하여 나머지 DOM이 구성되기 전에 스타일이 구문 분석되도록 하십시오. 이렇게 하면 구문 분석 순서상 스타일이 늦게 도착할 때 발생하는 스타일 미적용 콘텐츠의 짧은 깜박임을 방지할 수 있습니다.

:host-context(.dark-mode) :host는 섀도 외부에 있는 조상 선택자를 기준으로 호스트의 스타일을 지정합니다. 상위 수준 래퍼의 클래스에 따라 구성 요소의 테마를 지정할 때 유용합니다. 브라우저 지원은 양호하지만 대상 브라우저 조합에서 확인하십시오.

문서 전체의 CSS 재설정(body의 여백, box-sizing)은 섀도 트리에 영향을 주지 않습니다. 필요한 재설정을 각 섀도 루트 내부에 다시 적용하거나, 생성한 스타일시트를 모든 구성 요소에 채택하여 공유하십시오.

Chrome DevTools는 Elements 패널에서 "#shadow-root (open)" 아래에 섀도 루트를 표시합니다. 다른 CSS와 마찬가지로 :host 의사 클래스와 ::part 규칙을 포함하여 섀도 스타일을 검사하고 편집하고 전환할 수 있습니다.

섀도 DOM은 양방향으로 스타일을 캡슐화합니다. :host로 호스트의 스타일을 지정하고, 상속되는 CSS 사용자 지정 속성으로 테마 지정 지점을 노출하며, ::part로 개별 요소를 스타일 지정 대상으로 노출하고, adoptedStyleSheets로 스타일시트를 공유하십시오. 문서 전체의 CSS는 경계를 넘지 않으므로 각 섀도 루트 내부에 재설정을 다시 적용해야 합니다.