HTML <shadow> 태그 이해하기, Shadow DOM의 시작점

HTML <shadow> 태그 이해하기, Shadow DOM의 시작점

웹 컴포넌트(Web Components)는 현대 웹 개발에서 점점 더 중요한 기술로 자리 잡고 있습니다. 이 중에서도 Shadow DOM은 캡슐화(encapsulation)와 스타일링 분리를 가능하게 하여 개발자의 작업을 단순화합니다. 이 글에서는 HTML의 <shadow> 태그와 Shadow DOM의 개념을 이해하는 데 필요한 정보를 자세히 살펴보겠습니다.

 

 

목차

1. Shadow DOM이란 무엇인가?
2. <shadow> 태그의 역할
3. Shadow DOM의 장점
4. Shadow DOM 생성 방법
5. Shadow DOM 내에서 스타일링
6. Shadow DOM의 한계
7. 실제 사례: Shadow DOM 활용

 

1. Shadow DOM이란 무엇인가?

Shadow DOM은 웹 컴포넌트의 한 요소로, DOM 트리의 일부를 캡슐화하여 외부에서 접근할 수 없도록 만듭니다. 이는 마치 별도의 "섬"처럼 작동하며, 스타일 충돌을 방지하고 독립적인 UI 컴포넌트를 만들 수 있도록 돕습니다.

• 캡슐화: 외부 DOM과 격리됩니다.
• 재사용성: 독립적인 컴포넌트를 생성할 수 있습니다.
• 모듈화: 코드 관리가 쉬워집니다.

 

 

 

2. <shadow> 태그의 역할

<shadow> 태그는 Shadow DOM의 구성 요소 중 하나로, 사용자가 기본 DOM의 내용을 대체하거나 보강하는 데 사용할 수 있습니다. 그러나 현재 HTML 표준에서 <shadow> 태그는 더 이상 사용되지 않고, 대신 JavaScript API를 통해 Shadow DOM을 조작합니다.

 

 

 

3. Shadow DOM의 장점

Shadow DOM을 사용하면 다음과 같은 이점을 얻을 수 있습니다:

1. 스타일 격리로 디자인 충돌 방지
2. 코드 모듈화 및 재사용성 향상
3. 컴포넌트 기반 개발의 용이성

 

 

 

4. Shadow DOM 생성 방법

Shadow DOM은 JavaScript를 사용하여 생성합니다:

// Shadow DOM 생성 예제
const host = document.querySelector('#hostElement');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = '<style>p { color: red; }</style><p>Hello Shadow DOM!</p>';

 

 

 

 

5. Shadow DOM 내에서 스타일링

Shadow DOM은 스타일이 내부에 캡슐화되므로, 외부 CSS와 충돌하지 않습니다. 다음은 예시입니다:

shadowRoot.innerHTML = `
  <style>
    h1 { font-size: 20px; color: blue; }
  </style>
  <h1>Hello Shadow!</h1>
`;

 

 

 

6. Shadow DOM의 한계

Shadow DOM은 강력하지만 몇 가지 단점이 있습니다:

• 브라우저 지원 제한: 일부 구형 브라우저는 지원하지 않습니다.
• 복잡성 증가: 소규모 프로젝트에는 과도할 수 있습니다.

 

 

 

7. 실제 사례: Shadow DOM 활용

Shadow DOM은 다음과 같은 상황에서 유용합니다:

상황	활용 예시
캡슐화가 필요한 컴포넌트	모달, 커스텀 버튼
스타일 충돌 방지	위젯, 플러그인