Shadow DOM이란?

Shadow DOM은 문서의 나머지 부분과 스타일·마크업을 격리하는 별도의 DOM 트리입니다.

특징

• 캡슐화
• Shadow DOM 안의 CSS는 외부에 영향을 주지 않고, 외부 CSS도 Shadow DOM 안으로 들어오지 않음
• #id, .class 선택자도 Shadow 경계 안에서만 적용됨
• 구조
• 일반 DOM 노드에 attachShadow()로 Shadow Root를 붙임
• Shadow Root 아래에 별도의 DOM 트리가 생김
• 이 경계를 Shadow Boundary라고 함
• 사용처
• Web Components (<custom-element>)
• <video>, <input type="range"> 같은 브라우저 기본 요소
• iframe과 비슷하게 격리된 UI를 만들 때 사용

예시

<div id="host"></div>

<script>

const host = document.getElementById('host');

const shadow = host.attachShadow({ mode: 'open' });

shadow.innerHTML = `

<style>p { color: red; }</style>

<p>이 스타일은 외부에 영향 없음</p>

`;

</script>

mode: 'open' vs mode: 'closed'

• open: element.shadowRoot로 접근 가능
• closed: element.shadowRoot가 null이라 외부에서 직접 접근 불가

React, Vue 같은 프레임워크나 라이브러리에서 Shadow DOM을 쓰는 컴포넌트를 사용할 때, 이 격리 때문에 스타일이 적용되지 않는 문제가 자주 생깁니다.