[Daily morning study] Shadow DOM과 Web Components

06 Oct 2026 in Daily morning study / -front

#daily morning study

---

Web Components란

Web Components는 브라우저 표준 기술만으로 재사용 가능한 커스텀 UI 컴포넌트를 만드는 기술이다. React나 Vue 같은 프레임워크 없이도 캡슐화된 컴포넌트를 구성할 수 있다.

핵심 기술은 세 가지다.

기술	역할
Custom Elements	커스텀 HTML 태그 정의
Shadow DOM	내부 DOM을 캡슐화해 외부 스타일/스크립트 격리
HTML Templates	<template>, <slot> 태그로 재사용 가능한 마크업 정의

---

Custom Elements

customElements.define()으로 HTML 태그를 직접 정의한다.

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

customElements.define('my-button', MyButton);

이후 HTML에서 <my-button></my-button> 으로 사용 가능하다.

라이프사이클 콜백

class MyCard extends HTMLElement {
  connectedCallback()    { /* DOM에 연결될 때 */ }
  disconnectedCallback() { /* DOM에서 제거될 때 */ }
  attributeChangedCallback(name, oldVal, newVal) { /* 속성 변경 시 */ }

  static get observedAttributes() {
    return ['title', 'disabled']; // 감지할 속성 목록
  }
}

---

Shadow DOM

Shadow DOM은 요소 내부에 독립된 DOM 트리를 생성해 외부 스타일이 침범하지 못하도록 격리한다.

class MyCard extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        p { color: red; } /* 이 스타일은 shadow 내부에만 적용 */
      </style>
      <p>격리된 컴포넌트</p>
    `;
  }
}

mode: 'open'이면 element.shadowRoot로 외부에서 접근 가능하고, 'closed'면 접근이 차단된다.

스타일 격리 원리

• Light DOM: 일반적인 document DOM. 전역 CSS가 모두 적용된다.
• Shadow DOM: 컴포넌트 내부 전용 DOM. 외부 CSS가 스며들지 않는다.
• :host 선택자로 shadow root 자신(=컴포넌트 태그)에 스타일을 지정할 수 있다.

:host {
  display: block;
  border: 1px solid #ccc;
}

:host([disabled]) {
  opacity: 0.5;
}

---

HTML Templates와 Slot

<template> 태그 안에 정의된 내용은 파싱은 되지만 렌더링되지 않는다. JS로 clone해서 사용한다.

<template id="card-template">
  <style>
    .card { padding: 16px; border-radius: 8px; }
  </style>
  <div class="card">
    <slot name="title"></slot>
    <slot></slot>
  </div>
</template>

class MyCard extends HTMLElement {
  connectedCallback() {
    const template = document.getElementById('card-template');
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(template.content.cloneNode(true));
  }
}

사용 측에서 슬롯에 콘텐츠를 주입한다.

<my-card>
  <span slot="title">카드 제목</span>
  <p>카드 본문 내용</p>
</my-card>

<slot>은 컴포넌트 내부에 구멍을 뚫어두는 개념이다. 이름 있는 슬롯(slot="title")은 지정 위치에 삽입되고, 기본 슬롯은 나머지 모든 자식을 받는다.

---

CSS 커스텀 프로퍼티를 통한 테마 주입

Shadow DOM은 외부 CSS를 막지만, CSS 변수(custom properties)는 shadow boundary를 통과한다. 이를 이용해 테마를 외부에서 제어할 수 있다.

/* 외부 CSS */
my-card {
  --card-bg: #f0f4ff;
  --card-radius: 12px;
}

/* shadow 내부 */
.card {
  background: var(--card-bg, white);
  border-radius: var(--card-radius, 4px);
}

---

React/Vue와의 비교

항목	Web Components	React/Vue
표준 여부	브라우저 표준	라이브러리
프레임워크 의존	없음	있음
반응형 데이터 바인딩	직접 구현 필요	내장
생태계/툴링	빈약	풍부
스타일 격리	Shadow DOM으로 완전 격리	CSS Modules, scoped 등
SSR 지원	제한적	잘 지원됨

Web Components 자체는 반응형 상태 관리 기능이 없어 복잡한 앱을 만들기 어렵다. 그래서 디자인 시스템의 leaf 컴포넌트(버튼, 입력 필드 등)를 만들거나, 다양한 프레임워크에서 공통으로 쓰일 UI 라이브러리를 구성할 때 주로 활용된다.

---

실제 활용 사례

• Google: <google-map>, <paper-button> 등 Polymer 라이브러리 기반
• YouTube: 플레이어 컴포넌트 일부가 Shadow DOM으로 구현됨
• GitHub: 일부 UI 요소
• 디자인 시스템: Adobe Spectrum, FAST (Microsoft) 등은 Web Components 기반

---

정리

• Web Components = Custom Elements + Shadow DOM + HTML Templates 세 기술의 조합
• Shadow DOM은 CSS/DOM 캡슐화를 브라우저 수준에서 보장한다
• <slot>으로 컴포넌트 외부에서 내용을 삽입할 수 있다
• CSS 변수는 shadow boundary를 통과해 테마 주입이 가능하다
• 복잡한 앱보다는 프레임워크 독립적인 공통 UI 컴포넌트 제작에 적합하다