Shadow DOM의 스타일 격리 개념

  1. 외부 스타일이 Shadow DOM 내부에 영향을 미치지 않음
    • 외부 스타일시트나 전역 스타일 설정은 Shadow DOM 내부의 요소에 영향을 미치지 않는다.
    • 예를 들어, 외부에 h1 태그에 대한 전역 스타일을 지정해도, Shadow DOM 내부의 h1 태그는 그 스타일을 상속받지 않는다.


  1. Shadow DOM 내부 스타일이 외부에 영향을 미치지 않음
    • 반대로, Shadow DOM 내부에서 정의된 스타일은 그 컴포넌트 내부에서만 적용되고, 외부 DOM에 있는 요소들에는 영향을 미치지 않는다.



왜 Shadow DOM에서는 외부 스타일이 적용되지 않는가? 🤷🏻‍♀️

Shadow DOM은 웹 컴포넌트를 개발할 때 해당 컴포넌트를 완전히 캡슐화된 모듈로 만들기 위해 설계된 것이다. 즉, 컴포넌트가 외부 환경에 의존하지 않고 독립적으로 동작하게 하기 위해 완전한 스타일 격리를 제공한다. 이로 인해 컴포넌트가 예상치 못한 외부 스타일의 영향을 받지 않게 되어, 재사용성이 높아지고 유지보수가 쉬워진다는 장점이 있다.

shadow DOM 트리 자체가 일반 DOM 트리와 별도로 존재하는 개념이라 글로벌 스타일이나 부모 스타일 캐스케이딩이 불가능한듯 하다.



외부 스타일이 Shadow DOM 스타일에 영향을 미치지 않는다는 근거

공식문서참고

The hidden DOM nodes of a shadow tree are generally not affected by anything applied outside the shadow tree, and vice versa. The shadow boundary, where the shadow DOM ends and the regular DOM begins, can be traversed, but only very intentionally:

-> 쉐도우 트리의 숨겨진 DOM 노드는 일반적으로 쉐도우 트리 외부에 적용된 어떤 것에도 영향을 받지 않으며, 그 반대의 경우도 마찬가지이다. shadow DOM이 끝나고 일반 DOM이 시작되는 shadow boundary는 통과할 수 있지만, 이는 매우 의도적으로만 가능하다.


공식문서참고

In both cases, the styles defined in the shadow DOM tree are scoped to that tree, so just as page styles don’t affect elements in the shadow DOM, shadow DOM styles don’t affect elements in the rest of the page.

-> shadow DOM 트리에 정의된 스타일은 해당 트리로 범위가 지정되므로 페이지 스타일이 shadow DOM의 요소에 영향을 주지 않는 것처럼 shadow DOM 스타일은 페이지의 나머지 부분에 있는 요소에 영향을 주지 않는다.



예외적으로 상속 되는 스타일

  • color
  • font-family, font-size, font-style, font-weight
  • line-height
  • text-align, text-transform
  • visibility
  • cursor
  • 등 공식문서 에서 inherited 정보를 통해 확인할 수 있음



기본 CSS 연산자

공식문서


:host

Shadow DOM의 루트 요소(호스트)를 스타일링


:host()

호스트 요소에 특정 클래스나 속성이 있을 때만 스타일을 적용하고 싶을 때 사용

:host(.primary) {
    background-color:
    blue; color: white;
}

// <my-element class='primary' />


:host-context()

Shadow DOM 외부의 상위 요소가 특정 조건을 만족할 때(어떤 부모 요소에 특정 클래스가 있을 때), Shadow DOM 내부의 스타일을 조정

:host-context(.dark-mode) {
    background-color: black;
    color: white;
}

// <my-element/> 가 dark-mode 클래스를 가진 요소 내부에 있을 때 호스트 스타일 설정


::slotted

Shadow DOM 내부에서 <slot> 요소를 통해 삽입된 Light DOM(일반 DOM) 스타일링

::slotted(h1) {
    color: red;
}

// <slot>에 들어온 모든 <h1> 요소 스타일링