프론트엔드
shadow DOM으로 신규 프로젝트의 스타일을 지키는 방법
두줄요약
전역 Bulma 스타일과 신규 React 앱의 충돌을 shadow DOM으로 격리했습니다. Emotion 스타일과 Portal 타겟도 shadow root 내부로 옮겨 정상 렌더링을 확보했습니다.
문제 상황
- Bulma 기반 기존 서비스의 전역·태그 선택자 스타일과 신규 React 앱 디자인 시스템의 충돌
- 기존 GNB·Footer의 스타일 유지 필요로 HTML 단위 스타일 제거 불가
선택 이유
!important방식의 우선순위 관리·미세한 스타일 오류 탐지 부담- SCSS
load-css와not선택자 방식의 스타일 변수 접근 불가 - 마크업·스타일·동작을 외부 DOM과 격리하는 shadow DOM 채택
구조와 흐름
react-shadow의root.div를 shadow host로 생성해 신규 앱 렌더링 영역 격리- Emotion cache의
container를 shadow root로 지정해 스타일 태그를 내부 삽입 - Theme Provider에서 React Portal 기본 타겟을 shadow root로 변경
적용해볼 점
- 레거시 페이지 내부에 신규 앱을 점진적으로 마이그레이션할 때 스타일 격리 수단으로 활용
- 모달·툴팁·알림처럼 Portal 기반 컴포넌트의 렌더링 타겟 동시 점검
