쉐도우 돔 (Shadow DOM) 이란?

쉐도우 돔 (Shadow DOM) 이란?

쉐도우 돔 (Shadow DOM)은 웹 컴포넌트 (Web Components)의 핵심 기술 중 하나로, 주요 브라우저에 기본적으로 탑재되어 있는 웹 API입니다. 쉐도우 돔을 이해하려면 먼저 웹 컴포넌트의 목적과 역할을 알아야 합니다. 웹 컴포넌트는 재사용 가능한 사용자 지정 요소를 생성하기 위한 기술 세트로, 이를 통해 개발자는 더욱 모듈화되고 재사용 가능한 웹 애플리케이션을 구축할 수 있습니다.

쉐도우 돔의 핵심 기능 및 장점

1. 캡슐화 (Encapsulation): 쉐도우 돔을 사용하면 외부 돔과는 별도의 돔 구조를 갖게 되어, 스타일 및 코드의 충돌 없이 독립성을 유지할 수 있습니다. 이는 CSS 스타일이나 JavaScript 로직이 쉐도우 돔 외부의 요소에 영향을 주지 않게 함을 의미합니다.
2. 모듈화 및 재사용성: 웹 컴포넌트와 함께 사용되는 쉐도우 돔은 독립적인 돔 구조를 제공하기 때문에, 개발된 웹 컴포넌트를 다른 프로젝트나 웹 페이지에서도 손쉽게 사용할 수 있습니다.
3. 성능 향상: 쉐도우 돔은 실제 돔과는 별도로 동작하므로, 복잡한 웹 애플리케이션에서도 더 빠른 렌더링 성능을 제공할 수 있습니다.

쉐도우 돔 사용 예

HTML의 기본 요소 중 <video> 태그는 사실 내부적으로는 재생 버튼, 볼륨 조절, 진행 바 등의 여러 하위 요소들로 구성되어 있습니다. 그러나 이들 요소는 직접적으로는 보이지 않습니다. 이는 <video> 태그가 내부적으로 쉐도우 돔을 사용하여 이러한 요소들을 캡슐화하기 때문입니다.

쉐도우 돔의 생성

웹 컴포넌트를 정의할 때, 해당 컴포넌트 내부에 쉐도우 돔을 추가할 수 있습니다.

let shadow = elementRef.attachShadow({ mode: "open" });
let shadow = elementRef.attachShadow({ mode: "closed" });

이렇게 생성된 shadowRoot에는 독립된 돔 구조가 형성되며, 이 내부에 HTML, CSS, JavaScript 등의 로직을 캡슐화하여 넣을 수 있습니다.

 

결론

쉐도우 돔은 웹의 모듈화와 재사용성을 향상시키는 강력한 도구입니다. 웹 컴포넌트와 함께 사용되면, 웹 애플리케이션의 개발 및 유지보수가 훨씬 간편해집니다.