[Part 10] Web Components — Shadow DOM 있는 것 vs 없는 것

[Part 10] Web Components — Shadow DOM 있는 것 vs 없는 것

Part 9에서는 static template 패턴을 통해 Web Components의 반복 작업을 줄이는 방법을 알아봤다.

이번 글에서는 Shadow DOM을 사용할지 말지에 대한 기준을 정리한다.

Web Components를 처음 배우면 Shadow DOM을 무조건 사용해야 한다고 생각하기 쉽다.

하지만 실제로는 컴포넌트의 목적에 따라 선택해야 한다.

1. Shadow DOM을 사용하는 경우

AD

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

[50% 할인] 일본 eSIM 무제한 데이터|Rakuten / KDDI / Docomo

₩741

₩1,482

KKday

[투명톡+젤리 저스트미]

₩8,900

₩17,800

마리오케이스

[타임특가] 캘러웨이 CG 버킷햇 골프 스포츠 벙거지 캐주얼 빅사이즈 대두 모자

₩39,900

₩50,000

딜팡

Shadow DOM을 사용하는 가장 큰 이유는 스타일 격리다.

class MyButton extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({
      mode: 'open'
    });

    shadow.innerHTML = `
      <style>
        button {
          background: black;
          color: white;
        }
      </style>

      <button>
        <slot></slot>
      </button>
    `;
  }
}

이 button 스타일은 Shadow DOM 내부에만 적용된다.

외부 CSS와 충돌하지 않는다.

2. Shadow DOM이 적합한 상황

다음과 같은 경우 Shadow DOM을 사용하는 것이 좋다.

• 외부 CSS 때문에 스타일이 깨지면 안 되는 경우
• 여러 프로젝트에서 같은 UI를 재사용해야 하는 경우
• 디자인 시스템 컴포넌트를 만드는 경우
• 외부 사이트에 삽입되는 위젯을 만드는 경우
• 컴포넌트 내부 구조를 숨기고 싶은 경우

특히 공통 UI 라이브러리를 만들 때는 Shadow DOM이 유리하다.

어떤 프로젝트에 들어가도 내부 스타일이 쉽게 깨지지 않기 때문이다.

3. Shadow DOM을 사용하지 않는 경우

Custom Element는 Shadow DOM 없이도 만들 수 있다.

class MyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <button>
        <slot></slot>
      </button>
    `;
  }
}

이 경우 내부 button은 일반 DOM에 생성된다.

그래서 외부 CSS의 영향을 받는다.

4. Shadow DOM이 없을 때의 장점

Shadow DOM을 사용하지 않으면 외부 CSS로 내부 요소를 쉽게 스타일링할 수 있다.

my-button button {
  background: blue;
}

기존 CSS 프레임워크와 함께 쓰기도 쉽다.

• Bootstrap
• Tailwind CSS
• 기존 회사 공통 CSS
• 레거시 CSS

이미 프로젝트 전체 스타일이 정해져 있고 그 스타일을 그대로 따라야 한다면 Shadow DOM이 불편할 수 있다.

5. Shadow DOM이 없을 때의 단점

외부 CSS가 내부 요소에 영향을 줄 수 있다.

button {
  background: red;
}

이런 전역 CSS가 있으면 Custom Element 내부 button도 영향을 받을 수 있다.

따라서 스타일 안정성이 떨어질 수 있다.

6. 비교 정리

AD

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

케이메이트 - 외국인친구 만들기

7. 판단 기준

Shadow DOM을 사용할지 말지는 다음 기준으로 판단하면 된다.

• 스타일 격리가 중요한가?
• 외부 CSS와 충돌하면 안 되는가?
• 여러 프로젝트에서 재사용할 컴포넌트인가?
• 외부에서 자유롭게 스타일을 수정해야 하는가?
• 기존 CSS 프레임워크와 강하게 연결되어야 하는가?

스타일 안정성이 중요하면 Shadow DOM을 사용하는 것이 좋다.

외부 스타일 커스터마이징이 더 중요하면 Shadow DOM을 사용하지 않는 것도 방법이다.

8. 디자인 시스템에서는 어떻게 할까?

디자인 시스템은 여러 프로젝트에서 같은 UI를 일관되게 사용하기 위한 체계다.

버튼, 입력창, 카드, 모달 같은 공통 컴포넌트를 미리 만들어두고 재사용한다.

<ui-button>저장</ui-button>
<ui-card></ui-card>
<ui-modal></ui-modal>

디자인 시스템에서는 보통 Shadow DOM 사용을 고려할 수 있다.

어떤 프로젝트에 들어가도 컴포넌트 스타일이 깨지지 않아야 하기 때문이다.

다만 외부 커스터마이징을 위해 CSS 변수나 ::part 같은 방법을 함께 제공하는 것이 좋다.

9. 실무 추천

• 공통 UI 라이브러리라면 Shadow DOM 사용을 고려한다.
• 외부 배포용 위젯이라면 Shadow DOM이 유리하다.
• 기존 CSS에 강하게 의존하는 프로젝트라면 Shadow DOM 미사용도 가능하다.
• Tailwind 클래스를 직접 내부 요소에 적용해야 한다면 Shadow DOM이 불편할 수 있다.
• 스타일 안정성과 커스터마이징 사이에서 기준을 정해야 한다.

10. 정리

AD

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

간편 세척 대용량 글라스 에어프라이어 5.5L 304 스테인리스 오일망

₩59,900

₩70,470

11번가

[사은품 증정] 캠핑필수템, 지라프 구이바다 아이보리에디션

₩139,000

₩180,000

오늘의집

그리스에서 온 귀여운 친구들 이야이야앤프렌즈 오븐장감 외 굿즈 모음전

₩19,000

오늘의집

Shadow DOM은 강력하지만 항상 정답은 아니다.

• Shadow DOM을 사용하면 스타일 격리가 가능하다.
• 외부 CSS 충돌을 줄일 수 있다.
• 대신 외부 커스터마이징이 어려워질 수 있다.
• Shadow DOM을 사용하지 않으면 외부 스타일 적용이 쉽다.
• 대신 스타일 충돌에 주의해야 한다.
• 디자인 시스템은 Shadow DOM과 CSS 변수 조합이 잘 맞는다.

다음 Part에서는 Web Components에서 props와 state를 어떻게 설계하는지 알아본다.