Shadow DOM을 활용한 스타일 캡슐화

이 게시물은 다양한 플랫폼에서 제공하는 이력서를 하나의 서비스 내에서 스타일 충돌 없이 안전하게 보여주기 위한 Shadow DOM 적용 방법에 대해 설명합니다.

Shadow DOM 개념 및 구조

• Shadow host, Shadow tree, Shadow root 등 기본 구조 이해
• open/closed 모드와 외부 접근성 차이

이력서 렌더링 플로우

• HTML 문자열 파싱 및 meta, link, style, body 내용 재구성
• 내부 및 외부 스크립트 추출 후 로드와 삽입
• 스타일 변경 감지를 통한 FOUC 문제 해결
• 내부 스크립트 실행 시 document를 shadow root로 변환하는 주의사항

Shadow DOM의 한계와 고려 사항

• 플랫폼별 이력서 변경 시 발생할 수 있는 Side Effect
• 디버깅의 어려움과 러닝 커브
• SEO 인덱싱 지연 문제 및 대응 방법

Shadow DOM은 스타일 충돌 문제를 근본적으로 해결하는 동시에, 외부 스크립트 처리와 렌더링 안정화를 위한 다양한 기술적 고민과 해결책을 포함하고 있습니다.