프론트엔드
Shadow Dom : 중요한 건 깨지지 않는 스타일
두줄요약
여러 플랫폼의 이력서를 한 화면에서 안정적으로 보여주기 위해 Shadow DOM 적용 사례를 다뤘습니다. 스타일 충돌 방지, 스크립트 처리, FOUC 대응과 한계까지 정리했습니다.
문제 상황
- 다양한 연계 플랫폼의 이력서 형식과 CSS, 클래스명, 레이아웃 차이로 후보자 상세 페이지 스타일 충돌 위험
- 핵심 화면에서 이력서가 깨지면 가독성 저하와 평가 흐름 방해 가능성
해결 방법
- CSS/DOM 충돌을 막기 위해 Shadow DOM으로 스타일과 DOM을 독립된 공간에 격리
- HTML 문자열을 파싱해 meta, link, style, body를 재구성하고 외부 스크립트는 먼저 로드한 뒤 렌더링
- FOUC 방지를 위해 MutationObserver로 스타일 안정화 여부를 감지한 뒤 내부 스크립트 실행
주의할 점
- 외부 스크립트와 내부 스크립트의 document 의존성 치환 필요
- closed 모드 Shadow Root 접근 불가로 디버깅과 스크립트 실행 제약 발생
- 플랫폼별 이력서 변경, 러닝 커브, SEO 지연 같은 운영상 한계 존재