Shadow DOM과 Web Components: 캡슐화의 미학

React나 Vue 같은 프레임워크 없이도, 브라우저 표준 기술만으로 "재사용 가능한 컴포넌트"를 만들 수 있을까요? 네, Web Components가 있습니다. 그리고 그 핵심에는 Shadow DOM이 있습니다.

1. Shadow DOM (그림자 돔)

일반적인 DOM(Light DOM)과는 분리된, 격리된 DOM 트리입니다. 가장 큰 특징은 **"스타일 캡슐화"**입니다. Shadow DOM 안에서 정의한 <style> p { color: red; } </style>는 바깥세상의 <p>태그에 전혀 영향을 주지 않습니다. 반대도 마찬가지입니다.<input type="range">같은 태그를 뜯어보면 내부는 복잡한div` 덩어리들로 되어 있는데, 이것들이 쉐도우 돔으로 숨겨져 있어서 우리가 스타일을 쉽게 망가뜨리지 못하게 보호받는 것입니다.

2. Custom Elements

<my-card></my-card> 처럼 나만의 HTML 태그를 정의할 수 있습니다.

class MyCard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' }); // 쉐도우 돔 붙이기
    this.shadowRoot.innerHTML = `<p>나만의 카드!</p>`;
  }
}
customElements.define('my-card', MyCard);

3. 활용

디자인 시스템(Design System)을 만들 때 아주 유용합니다. 리액트를 쓰든 뷰를 쓰든, 혹은 쌩 HTML이든 상관없이 똑같은 UI 컴포넌트를 가져다 쓸 수 있기 때문입니다. "프레임워크 불가지론(Framework Agnostic)"을 실현하는 기술입니다.